如何使用Vue实现仿微信通讯录特效

百变鹏仔 3个月前 (09-25) #VUE

文章标签如何使用

如何使用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开发有所帮助，欢迎大家多多实践和探索。

文章推荐

如何使用Vue实现仿微信通讯录特效

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器