Comment utiliser Vue pour implémenter des effets spéciaux de type carnet d'adresses WeChat

Comment utiliser Vue pour obtenir des effets spéciaux de type carnet d'adresses WeChat

Introduction :
À l'ère actuelle des médias sociaux populaires, WeChat est devenu un outil social indispensable dans la vie quotidienne de nombreuses personnes. Le carnet d'adresses de WeChat est l'une des fonctions fréquemment utilisées. Grâce au carnet d'adresses, nous pouvons trouver les personnes que nous souhaitons contacter à tout moment et communiquer avec elles instantanément. Dans cet article, nous utiliserons le framework Vue pour implémenter des effets spéciaux de type carnet d'adresses WeChat afin d'offrir aux utilisateurs une meilleure expérience utilisateur.

1. Préparation
Avant de commencer, nous devons nous assurer que Vue et l'environnement de développement correspondant ont été installés. S'il n'est pas encore installé, vous pouvez vous référer à la documentation officielle de Vue pour l'installer.
Créez un nouveau projet Vue, qui peut être créé à l'aide de Vue CLI. La commande est la suivante :

vue create wechat-contacts

Entrez le répertoire du projet :

cd wechat-contacts

Exécutez le projet :

npm run serve

À ce stade, visitez http://localhost : 8080 dans le navigateur, vous verrez une page blanche.

2. Construisez l'interface
Créez un nouveau composant Contacts.vue dans le répertoire src et éditez le code suivant :

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

Introduisez le composant Contacts dans 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>

Exécutez le projet et vous verrez une simple adresse interface du livre, comprenant un champ de recherche et une liste de contacts.

3. Implémenter des effets interactifs
Nous devons maintenant implémenter deux effets interactifs : lorsque vous cliquez sur un contact, le contact sera ajouté à la session de chat ; lors de la recherche d'un contact, la liste de contacts sera mise à jour dynamiquement.

1. Cliquez sur le contact à ajouter à la session de chat
   Ajoutez un événement de clic dans Contacts.vue :

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

   Ajoutez le tableau chatContacts dans les données pour stocker les contacts ajoutés à la session de chat :

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

   Ajoutez des méthodes méthode addToChat :

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

   Modifiez le modèle et ajoutez une partie de session de chat :

   <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. Recherchez des mises à jour dynamiques des contacts
   Ajoutez l'attribut calculé filteredChatContacts dans le calcul pour filtrer les contacts dans la session de chat en fonction de mots-clés :

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

Modifiez le modèle et ajoutez une section de résultats de recherche :

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

À ce stade, nous avons terminé la mise en œuvre des effets spéciaux de type carnet d'adresses WeChat et obtenu les effets interactifs associés.

Conclusion :
En utilisant le framework Vue, nous pouvons facilement réaliser divers effets interactifs complexes. Cet article montre comment utiliser Vue pour implémenter des effets spéciaux de type carnet d'adresses WeChat et fournit des exemples de code pertinents. J'espère que cet article vous sera utile pour apprendre le développement de Vue. Tout le monde est invité à pratiquer et à explorer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!