youzan / vant

A lightweight, customizable Vue UI library for mobile web apps.

Home Page:https://vant-ui.github.io/vant/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

jj56313751 opened this issue · comments

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

实际业务中可能用到地址多选的情况,比如批量删除,复制
希望能支持地址多选,展示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,
    };
  },
};

Hello @jj56313751. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to main branch, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @jj56313751,我们完全同意你的提议/反馈,欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到 main 分支,提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等,并确保 CI 通过,我们会尽快进行 Review,提前感谢和期待你的贡献。