更新：登录功能
This commit is contained in:
285
uni_modules/wot-design-uni/components/wd-checkbox/index.scss
Normal file
285
uni_modules/wot-design-uni/components/wd-checkbox/index.scss
Normal file
@@ -0,0 +1,285 @@
|
||||
@import "./../common/abstracts/_mixin.scss";
|
||||
@import "./../common/abstracts/variable.scss";
|
||||
|
||||
.wot-theme-dark {
|
||||
@include b(checkbox) {
|
||||
@include e(shape) {
|
||||
background: transparent;
|
||||
border-color: $-checkbox-border-color;
|
||||
color: $-checkbox-check-color;
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
color: $-dark-color;
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.wd-checkbox__shape {
|
||||
border-color: $-dark-color-gray;
|
||||
background: $-dark-background4;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
|
||||
:deep(.wd-checkbox__check) {
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.wd-checkbox__shape {
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button) {
|
||||
|
||||
.wd-checkbox__label {
|
||||
border-color: #c8c9cc;
|
||||
background: #3a3a3c;
|
||||
color: $-dark-color-gray;
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.wd-checkbox__label {
|
||||
border-color: #c8c9cc;
|
||||
background: #3a3a3c;
|
||||
color: #c8c9cc;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button) {
|
||||
.wd-checkbox__label {
|
||||
background-color: $-dark-background;
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.wd-checkbox__label {
|
||||
background-color: $-dark-background2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@include b(checkbox) {
|
||||
display: block;
|
||||
margin-bottom: $-checkbox-margin;
|
||||
font-size: 0;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
line-height: 1.2;
|
||||
|
||||
@include when(last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include e(shape) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $-checkbox-size;
|
||||
height: $-checkbox-size;
|
||||
border: 2px solid $-checkbox-border-color;
|
||||
border-radius: 50%;
|
||||
color: $-checkbox-check-color;
|
||||
background: $-checkbox-bg;
|
||||
vertical-align: middle;
|
||||
transition: background 0.2s;
|
||||
box-sizing: border-box;
|
||||
|
||||
@include when(square) {
|
||||
border-radius: $-checkbox-square-radius;
|
||||
}
|
||||
}
|
||||
|
||||
@include e(input) {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@include edeep(btn-check) {
|
||||
display: inline-block;
|
||||
font-size: $-checkbox-icon-size;
|
||||
margin-right: 4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@include e(txt) {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 20px;
|
||||
@include lineEllipsis;
|
||||
}
|
||||
|
||||
@include e(label) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: $-checkbox-label-margin;
|
||||
vertical-align: middle;
|
||||
font-size: $-checkbox-label-fs;
|
||||
color: $-checkbox-label-color;
|
||||
}
|
||||
|
||||
@include edeep(check) {
|
||||
color: $-checkbox-check-color;
|
||||
font-size: $-checkbox-icon-size;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.wd-checkbox__shape {
|
||||
color: $-checkbox-checked-color;
|
||||
background: currentColor;
|
||||
border-color: currentColor;
|
||||
}
|
||||
|
||||
:deep(.wd-checkbox__check) {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button) {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: $-checkbox-margin;
|
||||
vertical-align: top;
|
||||
font-size: $-checkbox-button-font-size;
|
||||
|
||||
@include when(last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.wd-checkbox__shape {
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-width: $-checkbox-button-min-width;
|
||||
height: $-checkbox-button-height;
|
||||
font-size: $-checkbox-button-font-size;
|
||||
margin-left: 0;
|
||||
padding: 5px 15px;
|
||||
border: 1px solid $-checkbox-button-border;
|
||||
background-color: $-checkbox-button-bg;
|
||||
border-radius: $-checkbox-button-radius;
|
||||
transition: color 0.2s, border 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.wd-checkbox__label {
|
||||
color: $-checkbox-checked-color;
|
||||
background-color: $-checkbox-bg;
|
||||
border-color: $-checkbox-checked-color;
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include when(inline) {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: $-checkbox-margin;
|
||||
|
||||
@include when(last-child) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(disabled) {
|
||||
.wd-checkbox__shape {
|
||||
border-color: $-checkbox-border-color;
|
||||
background: $-checkbox-disabled-check-bg;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
color: $-checkbox-disabled-label-color;
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.wd-checkbox__shape {
|
||||
color: $-checkbox-disabled-check-color;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
color: $-checkbox-disabled-label-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button) {
|
||||
.wd-checkbox__label {
|
||||
background: $-checkbox-disabled-color;
|
||||
border-color: $-checkbox-button-border;
|
||||
color: $-checkbox-disabled-label-color;
|
||||
}
|
||||
|
||||
@include when(checked) {
|
||||
.wd-checkbox__label {
|
||||
border-color: $-checkbox-button-disabled-border;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 以下内容用于解决父子组件样式隔离的问题 —— START
|
||||
@include when(cell-box) {
|
||||
padding: 13px 15px;
|
||||
margin: 0;
|
||||
|
||||
@include when(large) {
|
||||
padding: 14px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(button-box) {
|
||||
display: inline-flex;
|
||||
width: 33.3333%;
|
||||
padding: 12px 12px 0 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.wd-checkbox__label {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:last-child::after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
@include when(large) {
|
||||
.wd-checkbox__shape {
|
||||
width: $-checkbox-large-size;
|
||||
height: $-checkbox-large-size;
|
||||
font-size: $-checkbox-large-size;
|
||||
}
|
||||
|
||||
.wd-checkbox__label {
|
||||
font-size: $-checkbox-large-label-fs;
|
||||
}
|
||||
}
|
||||
}
|
||||
68
uni_modules/wot-design-uni/components/wd-checkbox/types.ts
Normal file
68
uni_modules/wot-design-uni/components/wd-checkbox/types.ts
Normal file
@@ -0,0 +1,68 @@
|
||||
import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
|
||||
import { baseProps, makeStringProp } from '../common/props'
|
||||
|
||||
export type CheckShape = 'circle' | 'square' | 'button'
|
||||
|
||||
export const checkboxProps = {
|
||||
...baseProps,
|
||||
customLabelClass: makeStringProp(''),
|
||||
customShapeClass: makeStringProp(''),
|
||||
/**
|
||||
* 单选框选中时的值
|
||||
*/
|
||||
modelValue: {
|
||||
type: [String, Number, Boolean],
|
||||
required: true,
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 单选框形状，可选值：circle / square / button
|
||||
*/
|
||||
shape: {
|
||||
type: String as PropType<CheckShape>
|
||||
},
|
||||
/**
|
||||
* 选中的颜色
|
||||
*/
|
||||
checkedColor: String,
|
||||
/**
|
||||
* 禁用
|
||||
*/
|
||||
disabled: {
|
||||
type: [Boolean, null] as PropType<boolean | null>,
|
||||
default: null
|
||||
},
|
||||
/**
|
||||
* 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用
|
||||
*/
|
||||
trueValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: true
|
||||
},
|
||||
/**
|
||||
* 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用
|
||||
*/
|
||||
falseValue: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
/**
|
||||
* 设置大小，可选值：large
|
||||
*/
|
||||
size: String,
|
||||
/**
|
||||
* 文字位置最大宽度
|
||||
*/
|
||||
maxWidth: String
|
||||
}
|
||||
|
||||
export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
|
||||
|
||||
export type CheckboxExpose = {
|
||||
/**
|
||||
* 切换当前选中状态
|
||||
*/
|
||||
toggle: () => void
|
||||
}
|
||||
|
||||
export type CheckboxInstance = ComponentPublicInstance<CheckboxProps, CheckboxExpose>
|
||||
@@ -0,0 +1,177 @@
|
||||
<template>
|
||||
<view
|
||||
:class="`wd-checkbox ${innerCell ? 'is-cell-box' : ''} ${innerShape === 'button' ? 'is-button-box' : ''} ${isChecked ? 'is-checked' : ''} ${
|
||||
isFirst ? 'is-first-child' : ''
|
||||
} ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${innerShape === 'button' ? 'is-button' : ''} ${
|
||||
innerDisabled ? 'is-disabled' : ''
|
||||
} ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
|
||||
:style="customStyle"
|
||||
@click="toggle"
|
||||
>
|
||||
<!--shape为button时，移除wd-checkbox__shape，只保留wd-checkbox__label-->
|
||||
<view
|
||||
v-if="innerShape !== 'button'"
|
||||
:class="`wd-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
|
||||
:style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
|
||||
>
|
||||
<wd-icon custom-class="wd-checkbox__check" name="check-bold" />
|
||||
</view>
|
||||
<!--shape为button时只保留wd-checkbox__label-->
|
||||
<view
|
||||
:class="`wd-checkbox__label ${customLabelClass}`"
|
||||
:style="isChecked && innerShape === 'button' && !innerDisabled && innerCheckedColor ? 'color:' + innerCheckedColor : ''"
|
||||
>
|
||||
<!--button选中时展示的icon-->
|
||||
<wd-icon v-if="innerShape === 'button' && isChecked" custom-class="wd-checkbox__btn-check" name="check-bold" />
|
||||
<!--文案-->
|
||||
<view class="wd-checkbox__txt" :style="maxWidth ? 'max-width:' + maxWidth : ''">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'wd-checkbox',
|
||||
options: {
|
||||
addGlobalClass: true,
|
||||
virtualHost: true,
|
||||
styleIsolation: 'shared'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import wdIcon from '../wd-icon/wd-icon.vue'
|
||||
import { computed, getCurrentInstance, onBeforeMount, watch } from 'vue'
|
||||
import { useParent } from '../composables/useParent'
|
||||
import { CHECKBOX_GROUP_KEY } from '../wd-checkbox-group/types'
|
||||
import { getPropByPath, isDef } from '../common/util'
|
||||
import { checkboxProps, type CheckboxExpose } from './types'
|
||||
|
||||
const props = defineProps(checkboxProps)
|
||||
const emit = defineEmits(['change', 'update:modelValue'])
|
||||
|
||||
defineExpose<CheckboxExpose>({
|
||||
toggle
|
||||
})
|
||||
|
||||
const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
|
||||
|
||||
const isChecked = computed(() => {
|
||||
if (checkboxGroup) {
|
||||
return checkboxGroup.props.modelValue.indexOf(props.modelValue) > -1
|
||||
} else {
|
||||
return props.modelValue === props.trueValue
|
||||
}
|
||||
}) // 是否被选中
|
||||
|
||||
const isFirst = computed(() => {
|
||||
return index.value === 0
|
||||
})
|
||||
|
||||
const isLast = computed(() => {
|
||||
const children = isDef(checkboxGroup) ? checkboxGroup.children : []
|
||||
return index.value === children.length - 1
|
||||
})
|
||||
const { proxy } = getCurrentInstance() as any
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
// 组合使用走这个逻辑
|
||||
if (checkboxGroup) {
|
||||
checkName()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.shape,
|
||||
(newValue) => {
|
||||
const type = ['circle', 'square', 'button']
|
||||
if (isDef(newValue) && type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
|
||||
}
|
||||
)
|
||||
|
||||
const innerShape = computed(() => {
|
||||
return props.shape || getPropByPath(checkboxGroup, 'props.shape') || 'circle'
|
||||
})
|
||||
|
||||
const innerCheckedColor = computed(() => {
|
||||
return props.checkedColor || getPropByPath(checkboxGroup, 'props.checkedColor')
|
||||
})
|
||||
|
||||
const innerDisabled = computed(() => {
|
||||
if (!checkboxGroup) {
|
||||
return props.disabled
|
||||
}
|
||||
const { max, min, modelValue, disabled } = checkboxGroup.props
|
||||
if (
|
||||
(max && modelValue.length >= max && !isChecked.value) ||
|
||||
(min && modelValue.length <= min && isChecked.value) ||
|
||||
props.disabled === true ||
|
||||
(disabled && props.disabled === null)
|
||||
) {
|
||||
return true
|
||||
}
|
||||
|
||||
return props.disabled
|
||||
})
|
||||
|
||||
const innerInline = computed(() => {
|
||||
return getPropByPath(checkboxGroup, 'props.inline') || false
|
||||
})
|
||||
|
||||
const innerCell = computed(() => {
|
||||
return getPropByPath(checkboxGroup, 'props.cell') || false
|
||||
})
|
||||
|
||||
const innerSize = computed(() => {
|
||||
return props.size || getPropByPath(checkboxGroup, 'props.size')
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
// eslint-disable-next-line quotes
|
||||
if (props.modelValue === null) console.error("checkbox's value must be set")
|
||||
})
|
||||
|
||||
/**
|
||||
* @description 检测checkbox绑定的value是否和其它checkbox的value冲突
|
||||
* @param {Object} self 自身
|
||||
* @param myName 自己的标识符
|
||||
*/
|
||||
function checkName() {
|
||||
checkboxGroup &&
|
||||
checkboxGroup.children &&
|
||||
checkboxGroup.children.forEach((child: any) => {
|
||||
if (child.$.uid !== proxy.$.uid && child.modelValue === props.modelValue) {
|
||||
console.error(`The checkbox's bound value: ${props.modelValue} has been used`)
|
||||
}
|
||||
})
|
||||
}
|
||||
/**
|
||||
* @description 点击checkbox的Event handle
|
||||
*/
|
||||
function toggle() {
|
||||
if (innerDisabled.value) return
|
||||
// 复选框单独使用时点击反选，并且在checkbox上触发change事件
|
||||
if (checkboxGroup) {
|
||||
emit('change', {
|
||||
value: !isChecked.value
|
||||
})
|
||||
checkboxGroup.changeSelectState(props.modelValue)
|
||||
} else {
|
||||
const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
|
||||
emit('update:modelValue', newVal)
|
||||
emit('change', {
|
||||
value: newVal
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user