vant仿钉钉选择通讯录选人

### 使用 Vant 实现钉钉风格的通讯录选人组件 为了创建类似于钉钉中的通讯录选人功能，可以利用 `Vant` 提供的各种 UI 组件组合而成。具体来说，可以通过集成 `ContactList`, `Popup`, 和 `Checkbox` 等多个组件来构建这一特性。 #### 1. 安装依赖库 首先确保项目中已经安装了 Vant 库： ```bash npm install vant ``` #### 2. 创建联系人选人页面结构 定义一个 Vue 文件用于展示和操作联系人列表： ```html <template> <div class="contact-picker"> <!-- 显示已选项 --> <van-cell-group title="已选人员"> <van-cell v-for="(item, index) in selectedContacts" :key="index">{{ item.name }}</van-cell> </van-cell-group> <!-- 打开弹窗按钮 --> <van-button type="primary" @click="showPicker = true">选择成员</van-button> <!-- 联系人选择器 --> <van-popup v-model:visible="showPicker" position="right" style="width:80%"> <van-contact-list v-model:selected-label="selectedLabel" add-text="新建分组" @add="onAdd" @select="onSelect" > <van-index-bar> <van-index-anchor index="A"></van-index-anchor> <van-contact-card v-for="(contact, idx) in contacts" :key="idx" :name="contact.name" :tel="contact.tel" type="edit" @click="toggleSelection(contact)" /> </van-index-bar> </van-contact-list> </van-popup> </div> </template> ``` #### 3. 添加样式调整布局 为了让界面看起来更加接近钉钉的设计风格，可以在 CSS 中加入一些自定义样式： ```css .contact-picker .van-cell { padding-left: 16px; } .van-popup--right { height: 100%; } ``` #### 4. 编写逻辑处理函数 最后，在 `<script>` 部分编写必要的 JavaScript 方法来进行数据绑定以及事件响应： ```javascript <script setup lang="ts"> import { ref } from 'vue'; // 假设这是从服务器获取到的数据源 const contacts = [ { name: "张三", tel: "137..." }, { name: "李四", tel: "139..." } ]; let showPicker = ref(false); let selectedContacts = ref([]); let selectedLabel = ref(''); function toggleSelection(contact) { const index = selectedContacts.value.findIndex(item => item === contact); if (index !== -1) { selectedContacts.value.splice(index, 1); // 取消勾选则移除该项 } else { selectedContacts.value.push(contact); // 新增被选中的项 } updateSelectedLabel(); } function onAdd() {} function onSelect() {} function updateSelectedLabel() { selectedLabel.value = `${selectedContacts.value.length}位同事`; } </script> ``` 上述代码片段展示了如何基于 Vant 构建一个简单的钉钉样式的联系人选取控件[^1]。此方案不仅实现了基本的功能需求，同时也保持了一定程度上的灵活性以便后续扩展更多高级特性和优化用户体验。