vue 实现通讯录
实现通讯录的 Vue 方案
通讯录的核心功能通常包括联系人列表展示、搜索、分组（如按字母排序）以及增删改查操作。以下是基于 Vue 的实现方案：
数据结构设计
建议使用数组存储联系人数据，每个联系人包含基础信息（姓名、电话、首字母等）：
contacts: [
{ name: "张三", phone: "13800138000", initial: "Z" },
{ name: "李四", phone: "13900139000", initial: "L" }
]按字母分组
通过计算属性实现按首字母分组：
computed: {
groupedContacts() {
return this.contacts.reduce((groups, contact) => {
const letter = contact.initial.toUpperCase()
groups[letter] = groups[letter] || []
groups[letter].push(contact)
return groups
}, {})
}
}模板渲染
使用 v-for 嵌套渲染分组后的联系人：
<div v-for="(group, letter) in groupedContacts" :key="letter">
<h3>{{ letter }}</h3>
<ul>
<li v-for="contact in group" :key="contact.phone">
{{ contact.name }} - {{ contact.phone }}
</li>
</ul>
</div>搜索功能
添加搜索框并通过计算属性过滤结果：
computed: {
filteredContacts() {
return this.contacts.filter(contact =>
contact.name.includes(this.searchQuery) ||
contact.phone.includes(this.searchQuery)
)
}
}右侧字母导航
实现快速跳转的字母导航栏：
<div class="index-bar">
<span
v-for="letter in Object.keys(groupedContacts)"
:key="letter"
@click="scrollTo(letter)"
>
{{ letter }}
</span>
</div>完整组件示例
export default {
data() {
return {
contacts: [...],
searchQuery: ''
}
},
computed: {
filteredContacts() {
// 搜索逻辑
},
groupedContacts() {
// 分组逻辑
}
},
methods: {
scrollTo(letter) {
// 滚动到对应字母组
}
}
}优化建议
- 添加虚拟滚动提升长列表性能
- 使用 Vuex 或 Pinia 管理全局联系人状态
- 考虑添加动画过渡效果增强交互体验
- 移动端适配时可结合 touch 事件优化导航栏交互
实现时可结合具体需求调整功能细节，如添加收藏功能、最近联系人或多字段搜索等扩展功能。
