Skip to content

Commit

Permalink
fix: 🐛 修复checkbox-group的shape无法作用到子组件的问题
Browse files Browse the repository at this point in the history
Closes: #519
  • Loading branch information
xuqingkai committed Aug 14, 2024
1 parent 3def17e commit cd96d25
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 43 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ export const checkboxProps = {
/**
* 单选框形状,可选值:circle / square / button
*/
shape: makeStringProp<CheckShape>('circle'),
shape: {
type: String as PropType<CheckShape>
},
/**
* 选中的颜色
*/
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default {
import { computed, getCurrentInstance, onBeforeMount, watch } from 'vue'
import { useParent } from '../composables/useParent'
import { CHECKBOX_GROUP_KEY } from '../wd-checkbox-group/types'
import { isDef } from '../common/util'
import { getPropByPath, isDef } from '../common/util'
import { checkboxProps, type CheckboxExpose } from './types'
const props = defineProps(checkboxProps)
Expand Down Expand Up @@ -90,67 +90,45 @@ watch(
() => props.shape,
(newValue) => {
const type = ['circle', 'square', 'button']
if (type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
if (isDef(newValue) && type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
}
)
const innerShape = computed(() => {
if (!props.shape && checkboxGroup && checkboxGroup.props.shape) {
return checkboxGroup.props.shape
} else {
return props.shape
}
return props.shape || getPropByPath(checkboxGroup, 'props.shape') || 'circle'
})
const innerCheckedColor = computed(() => {
if (!props.checkedColor && checkboxGroup && checkboxGroup.props.checkedColor) {
return checkboxGroup.props.checkedColor
} else {
return props.checkedColor
}
return props.checkedColor || getPropByPath(checkboxGroup, 'props.checkedColor')
})
const innerDisabled = computed(() => {
let innerDisabled = props.disabled
if (checkboxGroup) {
if (
// max 生效时,group 已经选满,禁止其它节点再选中。
(checkboxGroup.props.max && checkboxGroup.props.modelValue.length >= checkboxGroup.props.max && !isChecked.value) ||
// min 生效时,group 选中的节点数量仅满足最小值,禁止取消已选中的节点。
(checkboxGroup.props.min && checkboxGroup.props.modelValue.length <= checkboxGroup.props.min && isChecked.value) ||
// 只要子节点自己要求 disabled,那就 disabled。
props.disabled === true ||
// 父节点要求全局 disabled,子节点没吱声,那就 disabled。
(checkboxGroup.props.disabled && props.disabled === null)
) {
innerDisabled = true
}
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 innerDisabled
return props.disabled
})
const innerInline = computed(() => {
if (checkboxGroup && checkboxGroup.props.inline) {
return checkboxGroup.props.inline
} else {
return false
}
return getPropByPath(checkboxGroup, 'props.inline') || false
})
const innerCell = computed(() => {
if (checkboxGroup && checkboxGroup.props.cell) {
return checkboxGroup.props.cell
} else {
return false
}
return getPropByPath(checkboxGroup, 'props.cell') || false
})
const innerSize = computed(() => {
if (!props.size && checkboxGroup && checkboxGroup.props.size) {
return checkboxGroup.props.size
} else {
return props.size
}
return props.size || getPropByPath(checkboxGroup, 'props.size')
})
onBeforeMount(() => {
Expand Down

0 comments on commit cd96d25

Please sign in to comment.