diff --git a/packages/vant/src/checkbox-group/CheckboxGroup.tsx b/packages/vant/src/checkbox-group/CheckboxGroup.tsx index 6529e0d19..babcf286a 100644 --- a/packages/vant/src/checkbox-group/CheckboxGroup.tsx +++ b/packages/vant/src/checkbox-group/CheckboxGroup.tsx @@ -7,14 +7,19 @@ import { } from 'vue'; // Utils -import { numericProp, createNamespace, makeArrayProp } from '../utils'; +import { + numericProp, + makeArrayProp, + makeStringProp, + createNamespace, +} from '../utils'; // Composables import { useChildren, useCustomFieldValue } from '@vant/use'; import { useExpose } from '../composables/use-expose'; // Types -import type { CheckerDirection } from '../checkbox/Checker'; +import type { CheckerShape, CheckerDirection } from '../checkbox/Checker'; import type { CheckboxGroupExpose, CheckboxGroupProvide, @@ -25,6 +30,7 @@ const [name, bem] = createNamespace('checkbox-group'); export const checkboxGroupProps = { max: numericProp, + shape: makeStringProp('round'), disabled: Boolean, iconSize: numericProp, direction: String as PropType, diff --git a/packages/vant/src/checkbox-group/test/index.spec.tsx b/packages/vant/src/checkbox-group/test/index.spec.tsx index 0e55e76d9..87c32e7b6 100644 --- a/packages/vant/src/checkbox-group/test/index.spec.tsx +++ b/packages/vant/src/checkbox-group/test/index.spec.tsx @@ -180,3 +180,29 @@ test('should toggle all checkboxes when toggleAll method is called', async () => wrapper.vm.toggleAll({ checked: true, skipDisabled: true }); expect(wrapper.vm.value).toEqual(['a', 'b', 'c']); }); + +test('should render shape correctly when using shape prop', () => { + const wrapper = mount({ + setup() { + const groupValue = ref([]); + + return { + groupValue, + }; + }, + render() { + return ( + + + + + ); + }, + }); + + const shapeClass = 'van-checkbox__icon--square'; + const shapeClass1 = 'van-checkbox__icon--round'; + const iconBoxs = wrapper.findAll('.van-checkbox__icon'); + expect(iconBoxs[0].classes()).toContain(shapeClass); + expect(iconBoxs[1].classes()).toContain(shapeClass1); +}); diff --git a/packages/vant/src/checkbox/Checkbox.tsx b/packages/vant/src/checkbox/Checkbox.tsx index 65f41fa14..105839810 100644 --- a/packages/vant/src/checkbox/Checkbox.tsx +++ b/packages/vant/src/checkbox/Checkbox.tsx @@ -1,13 +1,13 @@ -import { watch, computed, defineComponent, type ExtractPropTypes } from 'vue'; +import { + watch, + computed, + defineComponent, + type PropType, + type ExtractPropTypes, +} from 'vue'; // Utils -import { - pick, - extend, - truthProp, - makeStringProp, - createNamespace, -} from '../utils'; +import { pick, extend, truthProp, createNamespace } from '../utils'; import { CHECKBOX_GROUP_KEY } from '../checkbox-group/CheckboxGroup'; // Composables @@ -23,7 +23,7 @@ import type { CheckboxExpose } from './types'; const [name, bem] = createNamespace('checkbox'); export const checkboxProps = extend({}, checkerProps, { - shape: makeStringProp('round'), + shape: String as PropType, bindGroup: truthProp, }); diff --git a/packages/vant/src/checkbox/Checker.tsx b/packages/vant/src/checkbox/Checker.tsx index 97b03b440..17bede19d 100644 --- a/packages/vant/src/checkbox/Checker.tsx +++ b/packages/vant/src/checkbox/Checker.tsx @@ -5,7 +5,6 @@ import { truthProp, numericProp, unknownProp, - makeStringProp, makeRequiredProp, type Numeric, } from '../utils'; @@ -18,12 +17,13 @@ export type CheckerDirection = 'horizontal' | 'vertical'; export type CheckerLabelPosition = 'left' | 'right'; export type CheckerParent = { props: { + max?: Numeric; + shape?: CheckerShape | RadioShape; disabled?: boolean; iconSize?: Numeric; direction?: CheckerDirection; - checkedColor?: string; modelValue?: unknown | unknown[]; - max?: Numeric; + checkedColor?: string; }; }; @@ -41,7 +41,7 @@ export default defineComponent({ props: extend({}, checkerProps, { bem: makeRequiredProp(Function), role: String, - shape: makeStringProp('round'), + shape: String as PropType, parent: Object as PropType, checked: Boolean, bindGroup: truthProp, @@ -90,6 +90,10 @@ export default defineComponent({ } }); + const shape = computed(() => { + return props.shape || getParentProp('shape') || 'round'; + }); + const onClick = (event: MouseEvent) => { const { target } = event; const icon = iconRef.value; @@ -102,15 +106,18 @@ export default defineComponent({ }; const renderIcon = () => { - const { bem, shape, checked } = props; + const { bem, checked } = props; const iconSize = props.iconSize || getParentProp('iconSize'); return (
{slots.icon ? ( slots.icon({ checked, disabled: disabled.value }) - ) : shape !== 'dot' ? ( + ) : shape.value !== 'dot' ? ( ) : (
Checkbox + + 复选框 a + 复选框 b + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const checked = ref(['a', 'b']); + return { checked }; + }, +}; ``` ### Custom Color @@ -277,6 +291,7 @@ export default { | direction | Direction, can be set to `horizontal` | _string_ | `vertical` | | icon-size | Icon size of all checkboxes | _number \| string_ | `20px` | | checked-color | Checked color of all checkboxes | _string_ | `#1989fa` | +| shape `v4.6.3` | Can be set to `square` | _string_ | `round` | ### Checkbox Events diff --git a/packages/vant/src/checkbox/README.zh-CN.md b/packages/vant/src/checkbox/README.zh-CN.md index 3cf356c8c..f33b53c5d 100644 --- a/packages/vant/src/checkbox/README.zh-CN.md +++ b/packages/vant/src/checkbox/README.zh-CN.md @@ -51,7 +51,21 @@ export default { 将 `shape` 属性设置为 `square`，复选框的形状会变成方形。 ```html -复选框 + + 复选框 a + 复选框 b + +``` + +```js +import { ref } from 'vue'; + +export default { + setup() { + const checked = ref(['a', 'b']); + return { checked }; + }, +}; ``` ### 自定义颜色 @@ -294,6 +308,7 @@ export default { | direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` | | icon-size | 所有复选框的图标大小，默认单位为 `px` | _number \| string_ | `20px` | | checked-color | 所有复选框的选中状态颜色 | _string_ | `#1989fa` | +| shape `v4.6.3` | 形状，可选值为 `square` | _string_ | `round` | ### Checkbox Events diff --git a/packages/vant/src/checkbox/demo/index.vue b/packages/vant/src/checkbox/demo/index.vue index c8da877bd..d6a08f537 100644 --- a/packages/vant/src/checkbox/demo/index.vue +++ b/packages/vant/src/checkbox/demo/index.vue @@ -49,12 +49,12 @@ const state = reactive({ checkbox1: true, checkbox2: true, checkbox3: true, - checkboxShape: true, checkboxLabel: true, checkboxIcon: true, leftLabel: false, list: ['a', 'b'], result: ['a', 'b'], + checkboxShape: ['a', 'b'], result2: [], result3: [], checkAllResult: [], @@ -95,9 +95,10 @@ const toggleAll = () => { - - {{ t('customShape') }} - + + {{ t('customShape') }} a + {{ t('customShape') }} b + diff --git a/packages/vant/src/checkbox/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/checkbox/test/__snapshots__/demo-ssr.spec.ts.snap index 8a10b302b..012d528cd 100644 --- a/packages/vant/src/checkbox/test/__snapshots__/demo-ssr.spec.ts.snap +++ b/packages/vant/src/checkbox/test/__snapshots__/demo-ssr.spec.ts.snap @@ -68,25 +68,48 @@ exports[`should render demo and match snapshot 1`] = `
-
diff --git a/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap index b27a6b5ff..7627beb96 100644 --- a/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap +++ b/packages/vant/src/checkbox/test/__snapshots__/demo.spec.ts.snap @@ -43,18 +43,33 @@ exports[`should render demo and match snapshot 1`] = `
-