如何使用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實現仿微信通訊錄特效的詳細內容，更多請關注www.92cms.cn其它相關文章！
