Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request] AddressList 地址列表希望支持多选 #12816

Open
jj56313751 opened this issue Apr 22, 2024 · 0 comments
Open

[Feature Request] AddressList 地址列表希望支持多选 #12816

jj56313751 opened this issue Apr 22, 2024 · 0 comments

Comments

@jj56313751
Copy link

这个功能解决了什么问题?

实际业务中可能用到地址多选的情况,比如批量删除,复制
希望能支持地址多选,展示checkbox
点击地址后,回调返回所有选中的地址

你期望的 API 是什么样子的?

如果v-model绑定的是数组则支持多选页面展示checkbox,否则保持原样radio单选

// 单选
<van-address-list
  v-model="chosenAddressId"
  :list="list"
/>

// 多选
<van-address-list
  v-model="chosenAddressIds"
  :list="list"
  @click-item="handleClickItem"
/>
export default {
  setup() {
    // 单选
    const chosenAddressId = ref('1');
    // 多选 绑定id数组 Array<number | string>
    const chosenAddressIds = ref(['1', '2']);

    const list = [
      {
        id: '1',
        name: '张三',
        tel: '13000000000',
        address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
        isDefault: true,
      },
      {
        id: '2',
        name: '李四',
        tel: '1310000000',
        address: '浙江省杭州市拱墅区莫干山路 50 号',
      },
    ];

    // 点击地址回调
    const handleClickItem = (item, index) => {
        console.log(item) // 打印全部已选中地址 AddressListAddress[]
    }

    return {
      list,
      chosenAddressId,
      chosenAddressIds,
    };
  },
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant