<template> <div> <div class="index-bar"> <span v-for="(letter, index) in letters" :key="index" @click="scrollTo(letter)" > {{ letter }} </span> </div> <ul class="contact-list"> <li v-for="(contact, index) in filteredContacts" :key="index"> {{ contact.name }} </li> </ul> </div> </template> <script> export default { data() { return { contacts: [ { name: "Alice" }, { name: "Bob" }, { name: "Charlie" }, // 其他联系人... ], letters: [], // 存储通讯录中存在的字母 activeLetter: null // 当前选中的字母 }; }, computed: { filteredContacts() { if (this.activeLetter) { // 根据选中的字母过滤联系人 return this.contacts.filter(contact => contact.name.startsWith(this.activeLetter) ); } else { return this.contacts; } } }, methods: { scrollTo(letter) { this.activeLetter = letter; // 滚动到相应字母的位置 const index = this.letters.indexOf(letter); const element = document.getElementById(`index-${index}`); element.scrollIntoView(); } }, mounted() { // 获取通讯录中存在的字母 this.letters = Array.from( new Set(this.contacts.map(contact => contact.name[0])) ).sort(); } }; </script> <style> .index-bar { position: fixed; top: 0; right: 0; z-index: 1; display: flex; flex-direction: column; } .index-bar span { margin: 5px; cursor: pointer; } .contact-list { margin-top: 30px; } .contact-list li { list-style-type: none; } </style> 这段代码的详细介绍
时间: 2024-04-18 10:33:36 浏览: 107
这段代码实现了一个基本的微信通讯录索引条。让我们逐行解释代码的功能:
1. 在HTML的`<template>`标签中,定义了一个包含索引条和联系人列表的`<div>`容器。
2. 在`<div>`容器内部,有一个类名为`index-bar`的`<div>`元素,用于显示索引条。通过`v-for`指令遍历`letters`数组,生成对应的字母索引按钮。
3. 在`<div>`容器内部的下方,有一个类名为`contact-list`的`<ul>`元素,用于显示联系人列表。通过`v-for`指令遍历`filteredContacts`数组,生成联系人列表项。
4. 在`<script>`标签中,使用`export default`导出Vue组件对象。
5. 在Vue组件的`data`中定义了一些数据变量。其中,`contacts`存储通讯录中的联系人数据,`letters`存储通讯录中存在的字母,`activeLetter`用于记录当前选中的字母。
6. 使用计算属性(`computed`)定义了`filteredContacts`,根据选中的字母过滤联系人数据。
7. 定义了一个名为`scrollTo`的方法,用于处理点击索引条字母按钮的操作。在该方法中,将选中的字母赋值给`activeLetter`,然后通过DOM操作将对应字母的位置滚动到可视区域。
8. 在Vue组件的`mounted`生命周期钩子中,初始化`letters`数组,通过`Array.from()`和`Set`对象去重,然后按字母顺序进行排序,以获取通讯录中存在的字母。
9. 在`<style>`标签中,定义了索引条和联系人列表的样式。
以上就是这段代码的详细介绍。希望能对你有所帮助!如果还有其他问题,请随时提问。
阅读全文