日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

如何使用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其它相關文章！