如何使用Vue实现仿微信通讯录特效
导言：
在如今社交媒体盛行的时代，微信已经成为很多人日常生活中必不可少的社交工具。微信中的通讯录是经常使用的功能之一，通过通讯录我们可以随时查找到我们想联系的人，并与其进行即时交流。在这篇文章中，我们将使用Vue框架来实现仿微信通讯录特效，为用户提供更好的用户体验。
一、准备工作
在开始之前，我们需要确保已经安装好Vue及相应的开发环境。如果尚未安装，可以参考Vue官方文档进行安装。
创建一个新的Vue项目，可以使用Vue CLI进行创建，命令如下：
vue create wechat-contacts
进入项目目录：
立即学习“前端免费学习笔记（深入）”；
cd wechat-contacts
运行项目：
npm run serve
此时在浏览器中访问http://localhost:8080，你将看到一个空白页面。
二、搭建界面
在src目录下创建一个新的组件Contacts.vue，并编辑如下代码：
<template>
<div>
<div class="header">
<input type="text" v-model="keyword" placeholder="搜索联系人">
</div>
<div class="contacts-list">
<ul>
<li v-for="contact in filteredContacts" :key="contact.id">
<div class="avatar">{{ contact.name[0] }}</div>
<div class="info">
<div class="name">{{ contact.name }}</div>
<div class="message">{{ contact.message }}</div>
</div>
<div class="time">{{ contact.time }}</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
keyword: '',
contacts: [
{ id: 1, name: '张三', message: '你好', time: '12:30' },
{ id: 2, name: '李四', message: '在吗', time: '13:45' },
{ id: 3, name: '王五', message: '有新的消息', time: '15:20' },
{ id: 4, name: '赵六', message: '明天见', time: '17:10' }
]
}
},
computed: {
filteredContacts() {
return this.contacts.filter(contact => {
return contact.name.toLowerCase().includes(this.keyword.toLowerCase());
});
}
}
}
</script>
<style scoped>
.header {
padding: 10px;
background-color: #f5f5f5;
}
.header input {
width: 100%;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.contacts-list {
margin-top: 20px;
}
.contacts-list ul {
list-style-type: none;
padding: 0;
}
.contacts-list li {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.avatar {
width: 40px;
height: 40px;
background-color: #ccc;
border-radius: 50%;
text-align: center;
line-height: 40px;
margin-right: 10px;
font-size: 20px;
color: #fff;
}
.info {
flex-grow: 1;
}
.name {
font-size: 16px;
font-weight: bold;
}
.message {
font-size: 14px;
color: #999;
}
.time {
font-size: 14px;
color: #999;
}
</style>在App.vue中引入Contacts组件：
<template>
<div id="app">
<Contacts/>
</div>
</template>
<script>
import Contacts from './components/Contacts.vue';
export default {
name: 'App',
components: {
Contacts
}
}
</script>
<style>
#app {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>运行项目，你将看到一个简单的通讯录界面，包含搜索框和联系人列表。
三、实现交互效果
我们现在需要实现两个交互效果：点击联系人时，将联系人添加到聊天会话中；搜索联系人时，联系人列表会动态更新。
-
点击联系人添加到聊天会话
在Contacts.vue中添加一个点击事件：<li v-for="contact in filteredContacts" :key="contact.id" @click="addToChat(contact)">
在data中添加chatContacts数组用来存储添加到聊天会话中的联系人：
data() { return { ... chatContacts: [] } }在methods中添加addToChat方法：
methods: { addToChat(contact) { if (!this.chatContacts.includes(contact)) { this.chatContacts.push(contact); } } }修改模板，添加一个聊天会话的部分：
<div class="header"> <input type="text" v-model="keyword" placeholder="搜索联系人"> </div> ... <div class="chat"> <ul> <li v-for="contact in chatContacts" :key="contact.id"> <div class="avatar">{{ contact.name[0] }}</div> <div class="name">{{ contact.name }}</div> </li> </ul> </div> -
搜索联系人动态更新
在computed中添加filteredChatContacts计算属性，用来根据关键字过滤聊天会话中的联系人：computed: { filteredChatContacts() { return this.chatContacts.filter(contact => { return contact.name.toLowerCase().includes(this.keyword.toLowerCase()); }); } }
修改模板，添加一个搜索结果的部分：
<div class="header">
<input type="text" v-model="keyword" placeholder="搜索联系人">
</div>
...
<div class="search-results">
<ul>
<li v-for="contact in filteredChatContacts" :key="contact.id">
<div class="avatar">{{ contact.name[0] }}</div>
<div class="name">{{ contact.name }}</div>
</li>
</ul>
</div>至此，我们已经完成了仿微信通讯录特效的实现，并实现了相关的交互效果。
结语：
通过使用Vue框架，我们可以方便地实现各种复杂的交互效果。本文展示了如何使用Vue来实现仿微信通讯录特效，并提供了相关的代码示例。希望本文对你学习Vue开发有所帮助，欢迎大家多多实践和探索。
