更新：登录功能
This commit is contained in:
301
uni_modules/wot-design-uni/components/wd-radio/index.scss
Normal file
301
uni_modules/wot-design-uni/components/wd-radio/index.scss
Normal file
@@ -0,0 +1,301 @@
|
||||
@import "./../common/abstracts/_mixin.scss";
|
||||
@import "./../common/abstracts/variable.scss";
|
||||
|
||||
.wot-theme-dark {
|
||||
@include b(radio) {
|
||||
@include e(shape) {
|
||||
background: transparent;
|
||||
}
|
||||
@include e(label) {
|
||||
color: $-dark-color;
|
||||
}
|
||||
@include when(button) {
|
||||
.wd-radio__label {
|
||||
background-color: $-dark-background;
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__label {
|
||||
background-color: $-dark-background2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.wd-radio__label {
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__label {
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button) {
|
||||
.wd-radio__label {
|
||||
border-color: #c8c9cc;
|
||||
background: #3a3a3c;
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__label {
|
||||
border-color: #c8c9cc;
|
||||
background: #3a3a3c;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dot) {
|
||||
.wd-radio__shape {
|
||||
border-color: #c8c9cc;
|
||||
background: #3a3a3c;
|
||||
&::before {
|
||||
background-color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include b(radio) {
|
||||
display: flex;
|
||||
margin-top: $-radio-margin;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
line-height: 1.2;
|
||||
|
||||
@include when(first) {
|
||||
margin-top: 0;
|
||||
}
|
||||
@include e(shape) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $-radio-size;
|
||||
height: $-radio-size;
|
||||
font-size: $-radio-size;
|
||||
color: transparent;
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
@include e(input) {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
@include e(label) {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-size: $-radio-label-fs;
|
||||
color: $-radio-label-color;
|
||||
line-height: 20px;
|
||||
word-break: break-all;
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__shape {
|
||||
color: $-radio-checked-color;
|
||||
border-color: currentColor;
|
||||
display: inline-block;
|
||||
}
|
||||
.wd-radio__check {
|
||||
color: $-radio-checked-color;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dot) {
|
||||
.wd-radio__shape {
|
||||
border: 2px solid $-radio-dot-border-color;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
transition: none;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: $-radio-dot-size;
|
||||
height: $-radio-dot-size;
|
||||
left: calc(50% - #{$-radio-dot-size / 2});
|
||||
top: calc(50% - #{$-radio-dot-size / 2});
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
transform: scale(0);
|
||||
transition: transform .2s ease-in;
|
||||
}
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__shape {
|
||||
background-color: currentColor;
|
||||
border-color: currentColor;
|
||||
// background-color: $-radio-dot-checked-bg;
|
||||
// border-color: $-radio-dot-checked-border-color;
|
||||
&::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button) {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: 10px;
|
||||
|
||||
.wd-radio__shape {
|
||||
display: none;
|
||||
}
|
||||
.wd-radio__label {
|
||||
height: $-radio-button-height;
|
||||
min-width: $-radio-button-min-width;
|
||||
max-width: $-radio-button-max-width;
|
||||
padding: 5px 15px;
|
||||
margin-right: 0;
|
||||
border-radius: $-radio-button-radius;
|
||||
background-color: $-radio-button-bg;
|
||||
font-size: $-radio-button-fs;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid $-radio-button-border;
|
||||
transition: all 0.2s;
|
||||
@include lineEllipsis;
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__label {
|
||||
color: $-radio-checked-color;
|
||||
border-color: currentColor;
|
||||
background-color: $-radio-bg;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-placement-left {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@include when(inline) {
|
||||
display: inline-block;
|
||||
margin-top: 0;
|
||||
margin-right: $-radio-margin;
|
||||
|
||||
@include when(first) {
|
||||
margin-left: 0;
|
||||
}
|
||||
.wd-radio__shape {
|
||||
display: block;
|
||||
margin-right: 4px;
|
||||
float: left;
|
||||
&::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dot) {
|
||||
.wd-radio__shape {
|
||||
margin-top: 2px;
|
||||
}
|
||||
@include when(large) {
|
||||
.wd-radio__shape {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-placement-right {
|
||||
.wd-radio__shape {
|
||||
margin-right: 0;
|
||||
margin-left: 4px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.wd-radio__label {
|
||||
color: $-radio-disabled-label-color;
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__shape {
|
||||
color: $-radio-disabled-label-color;
|
||||
}
|
||||
.wd-radio__check {
|
||||
color: $-radio-disabled-label-color;
|
||||
}
|
||||
.wd-radio__label {
|
||||
color: $-radio-disabled-label-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button) {
|
||||
.wd-radio__label {
|
||||
border-color: $-radio-disabled-color;
|
||||
background: $-radio-disabled-color;
|
||||
border-color: $-radio-button-border;
|
||||
color: $-radio-disabled-label-color;
|
||||
}
|
||||
@include when(checked) {
|
||||
.wd-radio__label {
|
||||
border-color: $-radio-button-disabled-border;
|
||||
background: $-radio-disabled-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(dot) {
|
||||
.wd-radio__shape {
|
||||
background: $-radio-dot-disabled-bg;
|
||||
border-color: $-radio-dot-disabled-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 以下内容用于解决父子组件样式隔离的问题 —— START
|
||||
@include when(cell-radio) {
|
||||
padding: 13px 15px;
|
||||
margin: 0;
|
||||
|
||||
@include when(large) {
|
||||
padding: 14px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button-radio) {
|
||||
display: inline-flex;
|
||||
width: 33.3333%;
|
||||
padding: 12px 12px 0px 0px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.wd-radio__label {
|
||||
width: 100%;
|
||||
max-width: inherit;
|
||||
}
|
||||
}
|
||||
@include when(large) {
|
||||
.wd-radio__shape {
|
||||
width: $-radio-large-size;
|
||||
height: $-radio-large-size;
|
||||
font-size: $-radio-large-size;
|
||||
}
|
||||
.wd-radio__label {
|
||||
font-size: $-radio-large-label-fs;
|
||||
}
|
||||
|
||||
@include when(dot) {
|
||||
.wd-radio__shape {
|
||||
&::before {
|
||||
width: $-radio-dot-large-size;
|
||||
height: $-radio-dot-large-size;
|
||||
left: calc(50% - #{$-radio-dot-large-size / 2});
|
||||
top: calc(50% - #{$-radio-dot-large-size / 2});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// 以下内容用于解决父子组件样式隔离的问题 —— END
|
||||
}
|
||||
51
uni_modules/wot-design-uni/components/wd-radio/types.ts
Normal file
51
uni_modules/wot-design-uni/components/wd-radio/types.ts
Normal file
@@ -0,0 +1,51 @@
|
||||
/*
|
||||
* @Author: weisheng
|
||||
* @Date: 2024-03-15 20:40:34
|
||||
* @LastEditTime: 2024-12-07 18:52:34
|
||||
* @LastEditors: weisheng
|
||||
* @Description:
|
||||
* @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-radio/types.ts
|
||||
* 记得注释
|
||||
*/
|
||||
import type { PropType } from 'vue'
|
||||
import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
|
||||
|
||||
export type RadioShape = 'dot' | 'button' | 'check'
|
||||
|
||||
export type RadioIconPlacement = 'left' | 'right' | 'auto'
|
||||
|
||||
export const radioProps = {
|
||||
...baseProps,
|
||||
/** 选中时的值 */
|
||||
value: makeRequiredProp([String, Number, Boolean]),
|
||||
/** 单选框的形状 */
|
||||
shape: String as PropType<RadioShape>,
|
||||
/** 选中的颜色 */
|
||||
checkedColor: String,
|
||||
/** 禁用 */
|
||||
disabled: {
|
||||
type: [Boolean, null] as PropType<boolean | null>,
|
||||
default: null
|
||||
},
|
||||
/** 单元格 */
|
||||
cell: {
|
||||
type: [Boolean, null] as PropType<boolean | null>,
|
||||
default: null
|
||||
},
|
||||
/** 大小 */
|
||||
size: String,
|
||||
/** 内联 */
|
||||
inline: {
|
||||
type: [Boolean, null] as PropType<boolean | null>,
|
||||
default: null
|
||||
},
|
||||
/** 最大宽度 */
|
||||
maxWidth: String,
|
||||
/**
|
||||
* 图标位置
|
||||
* 可选值: 'left' | 'right' | 'auto'
|
||||
*/
|
||||
iconPlacement: {
|
||||
type: String as PropType<RadioIconPlacement>
|
||||
}
|
||||
}
|
||||
118
uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue
Normal file
118
uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue
Normal file
@@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<view
|
||||
:class="`wd-radio ${cellValue ? 'is-cell-radio' : ''} ${cellValue && shapeValue == 'button' ? 'is-button-radio' : ''} ${
|
||||
sizeValue ? 'is-' + sizeValue : ''
|
||||
} ${inlineValue ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${shapeValue !== 'check' ? 'is-' + shapeValue : ''} ${
|
||||
disabledValue ? 'is-disabled' : ''
|
||||
} icon-placement-${iconPlacement} ${customClass}`"
|
||||
:style="customStyle"
|
||||
@click="handleClick"
|
||||
>
|
||||
<view
|
||||
class="wd-radio__label"
|
||||
:style="`${maxWidth ? 'max-width:' + maxWidth : ''}; ${
|
||||
isChecked && shapeValue === 'button' && !disabledValue ? 'color :' + checkedColorValue : ''
|
||||
}`"
|
||||
>
|
||||
<slot></slot>
|
||||
</view>
|
||||
<view class="wd-radio__shape" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''">
|
||||
<wd-icon v-if="shapeValue === 'check'" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''" name="check"></wd-icon>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-radio',
|
||||
options: {
|
||||
virtualHost: true,
|
||||
addGlobalClass: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import { computed, watch } from 'vue'
|
||||
import { useParent } from '../composables/useParent'
|
||||
import { RADIO_GROUP_KEY } from '../wd-radio-group/types'
|
||||
import { radioProps, type RadioIconPlacement } from './types'
|
||||
import { getPropByPath, isDef } from '../common/util'
|
||||
|
||||
const props = defineProps(radioProps)
|
||||
|
||||
const { parent: radioGroup } = useParent(RADIO_GROUP_KEY)
|
||||
|
||||
const isChecked = computed(() => {
|
||||
if (radioGroup) {
|
||||
return props.value === radioGroup.props.modelValue
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
|
||||
const shapeValue = computed(() => {
|
||||
return props.shape || getPropByPath(radioGroup, 'props.shape')
|
||||
})
|
||||
|
||||
const checkedColorValue = computed(() => {
|
||||
return props.checkedColor || getPropByPath(radioGroup, 'props.checkedColor')
|
||||
})
|
||||
|
||||
const disabledValue = computed(() => {
|
||||
if (isDef(props.disabled)) {
|
||||
return props.disabled
|
||||
} else {
|
||||
return getPropByPath(radioGroup, 'props.disabled')
|
||||
}
|
||||
})
|
||||
|
||||
const inlineValue = computed(() => {
|
||||
if (isDef(props.inline)) {
|
||||
return props.inline
|
||||
} else {
|
||||
return getPropByPath(radioGroup, 'props.inline')
|
||||
}
|
||||
})
|
||||
|
||||
const sizeValue = computed(() => {
|
||||
return props.size || getPropByPath(radioGroup, 'props.size')
|
||||
})
|
||||
|
||||
const cellValue = computed(() => {
|
||||
if (isDef(props.cell)) {
|
||||
return props.cell
|
||||
} else {
|
||||
return getPropByPath(radioGroup, 'props.cell')
|
||||
}
|
||||
})
|
||||
|
||||
const iconPlacement = computed<RadioIconPlacement>(() => {
|
||||
if (isDef(props.iconPlacement)) {
|
||||
return props.iconPlacement
|
||||
} else {
|
||||
return getPropByPath(radioGroup, 'props.iconPlacement')
|
||||
}
|
||||
})
|
||||
|
||||
watch(
|
||||
() => props.shape,
|
||||
(newValue) => {
|
||||
const type = ['check', 'dot', 'button']
|
||||
if (!newValue || type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
|
||||
}
|
||||
)
|
||||
|
||||
/**
|
||||
* 点击子元素，通知父元素触发change事件
|
||||
*/
|
||||
function handleClick() {
|
||||
const { value } = props
|
||||
if (!disabledValue.value && radioGroup && isDef(value)) {
|
||||
radioGroup.updateValue(value)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user