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

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

王林
發布: 2023-09-22 09:01:43
原創
1191 人瀏覽過

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

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

導言:
在如今社群媒體盛行的時代,微信已成為許多人日常生活中必不可少的社交工具。微信中的通訊錄是經常使用的功能之一,透過通訊錄我們可以隨時查找到我們想聯繫的人,並與其進行即時交流。在這篇文章中,我們將使用Vue框架來實現仿微信通訊錄特效,為使用者提供更好的使用者體驗。

一、準備工作
在開始之前,我們需要確保已經安裝好Vue及對應的開發環境。如果尚未安裝,可以參考Vue官方文件進行安裝。
建立一個新的Vue項目,可以使用Vue CLI進行創建,命令如下:

1

vue create wechat-contacts

登入後複製

進入項目目錄:

1

cd wechat-contacts

登入後複製

運行項目:

1

npm run serve

登入後複製

此時在瀏覽器中造訪http://localhost:8080,你將會看到一個空白頁面。

二、建置介面
在src目錄下建立一個新的元件Contacts.vue,並編輯如下程式碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

<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元件:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<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中新增一個點擊事件:

    1

    <li v-for="contact in filteredContacts" :key="contact.id" @click="addToChat(contact)">

    登入後複製

    在data中新增chatContacts陣列用來儲存新增到聊天會話中的聯絡人:

    1

    2

    3

    4

    5

    6

    data() {

      return {

     ...

     chatContacts: []

      }

    }

    登入後複製

    在methods中新增addToChat方法:

    1

    2

    3

    4

    5

    6

    7

    methods: {

      addToChat(contact) {

     if (!this.chatContacts.includes(contact)) {

       this.chatContacts.push(contact);

     }

      }

    }

    登入後複製

    修改模板,新增一個聊天會話的部分:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    <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計算屬性,用來根據關鍵字過濾聊天會話中的聯絡人:

    1

    2

    3

    4

    5

    6

    7

    computed: {

      filteredChatContacts() {

     return this.chatContacts.filter(contact => {

       return contact.name.toLowerCase().includes(this.keyword.toLowerCase());

     });

      }

    }

    登入後複製

修改模板,新增一個搜尋結果的部分:

1

2

3

4

5

6

7

8

9

10

11

12

<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
最新問題
javascript - Vue 未定義
來自於 1970-01-01 08:00:00
0
0
0
javascript - 如何在vue-router中存取VUE實例?
來自於 1970-01-01 08:00:00
0
0
0
javascript - vue-for-idea
來自於 1970-01-01 08:00:00
0
0
0
沒看過VUE的專案實戰
來自於 1970-01-01 08:00:00
0
0
0
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板