Cara menggunakan Vue untuk melaksanakan kesan khas seperti buku alamat WeChat

Cara menggunakan Vue untuk melaksanakan kesan khas seperti buku alamat WeChat

Pengenalan:
Dalam era media sosial popular hari ini , WeChat telah menjadi Ia adalah alat sosial yang sangat diperlukan dalam kehidupan seharian ramai orang. Buku alamat dalam WeChat adalah salah satu fungsi yang kerap digunakan Melalui buku alamat, kita boleh mencari orang yang ingin kita hubungi pada bila-bila masa dan berkomunikasi dengan mereka serta-merta. Dalam artikel ini, kami akan menggunakan rangka kerja Vue untuk melaksanakan kesan khas seperti buku alamat WeChat untuk memberikan pengguna pengalaman pengguna yang lebih baik.

1 Persediaan
Sebelum kita mula, kita perlu memastikan bahawa Vue dan persekitaran pembangunan yang sepadan telah dipasang. Jika ia belum dipasang, anda boleh merujuk kepada dokumentasi rasmi Vue untuk memasangnya.
Buat projek Vue baharu, yang boleh dibuat menggunakan Vue CLI Perintahnya adalah seperti berikut:

vue create wechat-contacts

Masukkan direktori projek:

cd wechat-contacts

Jalankan projek. :

npm run serve

Pada masa ini, lawati http://localhost:8080 dalam penyemak imbas, anda akan melihat halaman kosong.

2. Bina antara muka
Buat komponen baharu Contacts.vue dalam direktori src, dan edit kod berikut:

rreee

Perkenalkan Kenalan ke dalam App.vue Komponen:

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

Jalankan projek dan anda akan melihat antara muka buku alamat yang ringkas, termasuk kotak carian dan senarai kenalan.

3 Laksanakan kesan interaktif
Kami kini perlu mencapai dua kesan interaktif: apabila mengklik pada kenalan, kenalan akan ditambahkan pada sesi sembang apabila mencari kenalan, kenalan senarai akan diperbaharui secara dinamik.

1. Klik kenalan untuk menambah sesi sembang
   Tambah acara klik dalam Contacts.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>

   Tambah data Tatasusunan chatContacts digunakan untuk menyimpan kenalan yang ditambahkan pada sesi sembang:

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

   Tambah kaedah addToChat dalam kaedah:

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

   Ubah suai templat dan tambah bahagian sesi sembang:# 🎜🎜#

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

2. Cari kemas kini dinamik kenalan

   Tambah atribut dikiraChatContacts yang ditapis dalam dikira untuk menapis kenalan dalam sesi sembang berdasarkan kata kunci: #🎜🎜🎎
   

   Ubah suai templat dan tambah bahagian hasil carian:

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

Setakat ini, kami telah menyelesaikan pelaksanaan kesan khas seperti buku alamat WeChat dan melaksanakan kesan interaksi yang berkaitan.
Kesimpulan:

Dengan menggunakan rangka kerja Vue, kita boleh mencapai pelbagai kesan interaktif yang kompleks dengan mudah. Artikel ini menunjukkan cara menggunakan Vue untuk melaksanakan kesan khas seperti buku alamat WeChat dan menyediakan contoh kod yang berkaitan. Saya harap artikel ini akan membantu anda dalam mempelajari pembangunan Vue. Semua orang dialu-alukan untuk berlatih dan meneroka.

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan khas seperti buku alamat WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!