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 · 1 comment
Open

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

jj56313751 opened this issue Apr 22, 2024 · 1 comment

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,
    };
  },
};
Copy link

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,提前感谢和期待你的贡献。

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

2 participants