How to use Vue to implement WeChat address book-like special effects

How to use Vue to implement WeChat address book-like special effects

Introduction:
In today’s era of popular social media, WeChat has become indispensable in many people’s daily lives Few social tools. The address book in WeChat is one of the frequently used functions. Through the address book, we can find the people we want to contact at any time and communicate with them instantly. In this article, we will use the Vue framework to implement WeChat address book-like special effects to provide users with a better user experience.

1. Preparation
Before starting, we need to ensure that Vue and the corresponding development environment have been installed. If it is not installed yet, you can refer to Vue official documentation to install it.
Create a new Vue project. You can use Vue CLI to create it. The command is as follows:

vue create wechat-contacts

Enter the project directory:

cd wechat-contacts

Run the project:

npm run serve

At this time Visit http://localhost:8080 in your browser and you will see a blank page.

2. Build the interface
Create a new component Contacts.vue in the src directory, and edit the following code:

<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>

Introduce the Contacts component into App.vue:

<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>

Run the project and you will see a simple address book interface, including a search box and a contact list.

3. Implement interactive effects
We now need to implement two interactive effects: when clicking on a contact, the contact will be added to the chat session; when searching for a contact, the contact list will be dynamically updated.

1. Click the contact to add to the chat session
   Add a click event in Contacts.vue:

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

   Add the chatContacts array in data to store the added to Contacts in the chat session:

   data() {
     return {
    ...
    chatContacts: []
     }
   }

   Add the addToChat method in methods:

   methods: {
     addToChat(contact) {
    if (!this.chatContacts.includes(contact)) {
      this.chatContacts.push(contact);
    }
     }
   }

   Modify the template and add a part of the chat session:

   <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. Search Contact Dynamic Update
   Add the filteredChatContacts calculated attribute in computed to filter contacts in the chat session based on keywords:

   computed: {
     filteredChatContacts() {
    return this.chatContacts.filter(contact => {
      return contact.name.toLowerCase().includes(this.keyword.toLowerCase());
    });
     }
   }

Modify the template and add a search result Part:

<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>

At this point, we have completed the implementation of the WeChat address book-like special effects and achieved related interactive effects.

Conclusion:
By using the Vue framework, we can easily achieve various complex interactive effects. This article shows how to use Vue to implement WeChat address book-like special effects and provides relevant code examples. I hope this article will be helpful to you in learning Vue development. Everyone is welcome to practice and explore.

The above is the detailed content of How to use Vue to implement WeChat address book-like special effects. For more information, please follow other related articles on the PHP Chinese website!