diff --git a/packages/vant/src/address-list/AddressList.tsx b/packages/vant/src/address-list/AddressList.tsx index d36040359..9698f823b 100644 --- a/packages/vant/src/address-list/AddressList.tsx +++ b/packages/vant/src/address-list/AddressList.tsx @@ -1,4 +1,9 @@ -import { defineComponent, type ExtractPropTypes } from 'vue'; +import { + defineComponent, + computed, + type ExtractPropTypes, + type PropType, +} from 'vue'; // Utils import { @@ -12,13 +17,16 @@ import { // Components import { Button } from '../button'; import { RadioGroup } from '../radio-group'; +import { CheckboxGroup } from '../checkbox-group'; import AddressListItem, { AddressListAddress } from './AddressListItem'; const [name, bem, t] = createNamespace('address-list'); export const addressListProps = { list: makeArrayProp(), - modelValue: numericProp, + modelValue: [...numericProp, Array] as PropType< + string | number | Array + >, switchable: truthProp, disabledText: String, disabledList: makeArrayProp(), @@ -46,6 +54,8 @@ export default defineComponent({ ], setup(props, { slots, emit }) { + const singleChoice = computed(() => !Array.isArray(props.modelValue)); + const renderItem = ( item: AddressListAddress, index: number, @@ -61,7 +71,19 @@ export default defineComponent({ emit(disabled ? 'selectDisabled' : 'select', item, index); if (!disabled) { - emit('update:modelValue', item.id); + if (singleChoice.value) { + emit('update:modelValue', item.id); + } else { + const value = props.modelValue as Array; + if (value.includes(item.id)) { + emit( + 'update:modelValue', + value.filter((id) => id !== item.id), + ); + } else { + emit('update:modelValue', [...value, item.id]); + } + } } }; @@ -75,6 +97,7 @@ export default defineComponent({ address={item} disabled={disabled} switchable={props.switchable} + singleChoice={singleChoice.value} defaultTagText={props.defaultTagText} rightIcon={props.rightIcon} onEdit={onEdit} @@ -114,7 +137,11 @@ export default defineComponent({ return (
{slots.top?.()} - {List} + {!singleChoice.value && Array.isArray(props.modelValue) ? ( + {List} + ) : ( + {List} + )} {DisabledText} {DisabledList} {slots.default?.()} diff --git a/packages/vant/src/address-list/AddressListItem.tsx b/packages/vant/src/address-list/AddressListItem.tsx index c5e4decae..6bd386f1c 100644 --- a/packages/vant/src/address-list/AddressListItem.tsx +++ b/packages/vant/src/address-list/AddressListItem.tsx @@ -14,6 +14,7 @@ import { Tag } from '../tag'; import { Icon } from '../icon'; import { Cell } from '../cell'; import { Radio } from '../radio'; +import { Checkbox } from '../checkbox'; const [name, bem] = createNamespace('address-item'); @@ -32,6 +33,7 @@ export default defineComponent({ address: makeRequiredProp>(Object), disabled: Boolean, switchable: Boolean, + singleChoice: Boolean, defaultTagText: String, rightIcon: makeStringProp('edit'), }, @@ -72,7 +74,7 @@ export default defineComponent({ }; const renderContent = () => { - const { address, disabled, switchable } = props; + const { address, disabled, switchable, singleChoice } = props; const Info = [
@@ -83,11 +85,19 @@ export default defineComponent({ ]; if (switchable && !disabled) { - return ( - - {Info} - - ); + if (singleChoice) { + return ( + + {Info} + + ); + } else { + return ( + + {Info} + + ); + } } return Info; diff --git a/packages/vant/src/address-list/README.md b/packages/vant/src/address-list/README.md index 8b73c09af..67c60825d 100644 --- a/packages/vant/src/address-list/README.md +++ b/packages/vant/src/address-list/README.md @@ -83,7 +83,7 @@ export default { | Attribute | Description | Type | Default | | --- | --- | --- | --- | -| v-model | Id of chosen address | _number \| string_ | - | +| v-model | Id of chosen address, support multiple selection (type is `[]`) | _number \| string \| number[] \| string[]_ | - | | list | Address list | _Address[]_ | `[]` | | disabled-list | Disabled address list | _Address[]_ | `[]` | | disabled-text | Disabled text | _string_ | - | diff --git a/packages/vant/src/address-list/README.zh-CN.md b/packages/vant/src/address-list/README.zh-CN.md index 57ac77fd0..875368d3f 100644 --- a/packages/vant/src/address-list/README.zh-CN.md +++ b/packages/vant/src/address-list/README.zh-CN.md @@ -83,7 +83,7 @@ export default { | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| v-model | 当前选中地址的 id | _number \| string_ | - | +| v-model | 当前选中地址的 id，支持多选（类型为 `[]`） | _number \| string \| number[] \| string[]_ | - | | list | 地址列表 | _AddressListAddress[]_ | `[]` | | disabled-list | 不可配送地址列表 | _AddressListAddress[]_ | `[]` | | disabled-text | 不可配送提示文案 | _string_ | - | diff --git a/packages/vant/src/address-list/test/index.spec.ts b/packages/vant/src/address-list/test/index.spec.ts index eaa486cac..c701edc32 100644 --- a/packages/vant/src/address-list/test/index.spec.ts +++ b/packages/vant/src/address-list/test/index.spec.ts @@ -16,7 +16,7 @@ const list = [ }, ]; -test('should not render Radio when switchable is false', async () => { +test('should not render Radio or Checkbox when switchable is false', async () => { const wrapper = mount(AddressList, { props: { list, @@ -25,6 +25,7 @@ test('should not render Radio when switchable is false', async () => { }); expect(wrapper.find('.van-radio').exists()).toBeFalsy(); + expect(wrapper.find('.van-checkbox').exists()).toBeFalsy(); }); test('should emit select event after clicking radio icon', () => { @@ -39,6 +40,39 @@ test('should emit select event after clicking radio icon', () => { expect(wrapper.emitted('select')![0]).toEqual([list[0], 0]); }); +test('should emit select event after clicking checkbox icon', () => { + const wrapper = mount(AddressList, { + props: { + list, + modelValue: [], + }, + }); + + wrapper.find('.van-checkbox').trigger('click'); + + expect(wrapper.emitted('select')![0]).toEqual([list[0], 0]); +}); + +test('should emit "update:modelValue" event when checkbox is clicked', async () => { + const wrapper = mount(AddressList, { + props: { + list, + modelValue: [], + }, + }); + + const items = wrapper.findAll('.van-checkbox'); + + await items[0].trigger('click'); + expect(wrapper.emitted('update:modelValue')![0]).toEqual([[list[0].id]]); + + await items[1].trigger('click'); + expect(wrapper.emitted('update:modelValue')![1]).toEqual([[list[1].id]]); + + await items[0].trigger('click'); + expect(wrapper.emitted('update:modelValue')![2]).toEqual([[list[0].id]]); +}); + test('should emit clickItem event when item is clicked', () => { const wrapper = mount(AddressList, { props: { @@ -59,3 +93,24 @@ test('should render tag slot correctly', () => { }); expect(wrapper.html()).toMatchSnapshot(); }); + +test('should bind value correctly when value is an array', () => { + const wrapper = mount(AddressList, { + props: { + list, + modelValue: list.map((l) => l.id), + }, + }); + + expect(wrapper.find('.van-checkbox-group').exists()); +}); + +test('should bind value correctly when value is not an array', () => { + const wrapper = mount(AddressList, { + props: { + list, + modelValue: list[0].id, + }, + }); + expect(wrapper.find('.van-radio-group').exists()); +});