首頁  >  文章  >  web前端  >  如何使用Vue實現仿微信通訊錄特效

如何使用Vue實現仿微信通訊錄特效

王林
王林原創
2023-09-22 09:01:431110瀏覽

如何使用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>

運行項目,你將看到一個簡單的通訊錄介面,包含搜尋框和聯絡人清單。

三、實現互動效果
我們現在需要實現兩個互動效果:點擊聯絡人時,將聯絡人加入聊天會話中;搜尋聯絡人時,聯絡人清單會動態更新。

  1. 點擊聯絡人加入到聊天會話
    在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>
  2. #搜尋聯絡人動態更新
    在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實現仿微信通訊錄特效的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn