So implementieren Sie mit Vue WeChat-Adressbuch-ähnliche Spezialeffekte

So nutzen Sie Vue, um WeChat-Adressbuch-ähnliche Spezialeffekte zu erzielen

Einführung:
Im heutigen Zeitalter der beliebten sozialen Medien ist WeChat zu einem unverzichtbaren sozialen Werkzeug im täglichen Leben vieler Menschen geworden. Das Adressbuch in WeChat ist eine der häufig genutzten Funktionen. Über das Adressbuch können wir jederzeit die Personen finden, mit denen wir Kontakt aufnehmen möchten, und mit ihnen kommunizieren. In diesem Artikel werden wir das Vue-Framework verwenden, um WeChat-Adressbuch-ähnliche Spezialeffekte zu implementieren und Benutzern ein besseres Benutzererlebnis zu bieten.

1. Vorbereitung
Bevor wir beginnen, müssen wir sicherstellen, dass Vue und die entsprechende Entwicklungsumgebung installiert wurden. Wenn es noch nicht installiert ist, können Sie zur Installation auf die offizielle Vue-Dokumentation zurückgreifen.
Erstellen Sie ein neues Vue-Projekt, das mit der Vue-CLI erstellt werden kann. Der Befehl lautet wie folgt:

vue create wechat-contacts

Geben Sie das Projektverzeichnis ein:

cd wechat-contacts

Führen Sie das Projekt aus:

npm run serve

Besuchen Sie zu diesem Zeitpunkt http://localhost: 8080 im Browser, Sie sehen eine leere Seite.

2. Erstellen Sie die Schnittstelle.
Erstellen Sie eine neue Komponente Contacts.vue im src-Verzeichnis und bearbeiten Sie den folgenden 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>

Fügen Sie die Kontakte-Komponente in App.vue ein:

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

Führen Sie das Projekt aus und Sie sehen eine einfache Adresse Buchoberfläche, einschließlich Suchfeld und Kontaktliste.

3. Interaktive Effekte implementieren
Wir müssen jetzt zwei interaktive Effekte implementieren: Wenn Sie auf einen Kontakt klicken, wird der Kontakt zur Chat-Sitzung hinzugefügt. Bei der Suche nach einem Kontakt wird die Kontaktliste dynamisch aktualisiert.

1. Klicken Sie auf den Kontakt, um ihn zur Chat-Sitzung hinzuzufügen.
   Fügen Sie ein Klickereignis in Contacts.vue hinzu:

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

   Nach dem Login kopieren
   :

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

   Nach dem Login kopieren
   Ändern Sie die Vorlage und fügen Sie einen Chat-Sitzungsteil hinzu:

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

   Nach dem Login kopieren
   Suchen Sie nach dynamischen Aktualisierungen von Kontakten.
Fügen Sie das berechnete Attribut „filteredChatContacts“ hinzu, um Kontakte in der Chat-Sitzung basierend auf Schlüsselwörtern zu filtern:

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

   Nach dem Login kopieren

   
   

   Ändern Sie die Vorlage und fügen Sie einen Suchergebnisabschnitt hinzu:

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

Nach dem Login kopieren
Zu diesem Zeitpunkt haben wir die Implementierung der WeChat-Adressbuch-ähnlichen Spezialeffekte abgeschlossen und entsprechende interaktive Effekte erzielt.
Fazit:

Durch die Verwendung des Vue-Frameworks können wir problemlos verschiedene komplexe interaktive Effekte erzielen. Dieser Artikel zeigt, wie Sie mit Vue WeChat-Adressbuch-ähnliche Spezialeffekte implementieren und relevante Codebeispiele bereitstellen. Ich hoffe, dass dieser Artikel Ihnen beim Erlernen der Vue-Entwicklung hilfreich sein wird. Jeder ist herzlich willkommen, ihn zu üben und zu erkunden.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit Vue WeChat-Adressbuch-ähnliche Spezialeffekte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!