Cara menggunakan Vue untuk melaksanakan kesan sembang seperti WeChat

Pengenalan:
Dengan perkembangan pesat Internet mudah alih, alatan pemesejan segera telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Sebagai salah satu alat pemesejan segera yang paling popular, kesan antara muka sembang unik WeChat membawa pengalaman yang baik kepada pengguna. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue.js untuk melaksanakan kesan sembang seperti WeChat, memberikan pembangun kaedah untuk mencapai kesan sembang seperti WeChat.

1. Persediaan
Sebelum bermula, kita perlu melakukan beberapa persiapan. Pastikan perancah Node.js dan Vue telah dipasang Anda boleh memasangnya dengan arahan berikut:
$ npm install -g @vue/cli

2. Buat projek Vue
Gunakan arahan berikut untuk mencipta Vue baharu. projek:
$ vue create chat-demo

3 Pasang dependensi yang diperlukan
Jalankan arahan berikut dalam direktori projek untuk memasang pustaka dependency yang diperlukan:
$ npm install vue-chat-scroll

4 Cipta yang baharu dalam direktori src Komponen Chat.vue akan digunakan untuk memaparkan kesan meniru kesan sembang WeChat. Dalam Chat.vue, kami akan menggunakan perpustakaan vue-chat-scroll untuk mencapai kesan tatal automatik. Berikut ialah contoh kod untuk Chat.vue:

import { VueChatScroll } daripada 'vue-chat-scroll';

nama: 'Chat',
data() {

return {
  messages: [],
  newMessage: '',
};

campuran: [VueChatScroll],

sendMessage() {
  if (this.newMessage) {
    const message = {
      id: new Date().getTime(),
      content: this.newMessage,
      time: new Date().toLocaleString(),
      isMine: true,
    };
    this.messages.push(message);
    this.newMessage = '';
  }
},

.senarai sembang {
padding: 10px;

.mesej sembang {
margin: 10px 0;
}

.mine {
text-align: right;
text-align: right;

.kandungan mesej {
warna latar belakang: #e6f7ff;

jejari sempadan: 5px;
}

saiz fon: 12px;

}

.chat-input {
padding: 10px;
}

5 Gunakan komponen Sembang
Gunakan komponen Sembang dalam App.vue untuk memaparkan halaman sembang. Berikut ialah contoh kod untuk App.vue:

Sembang daripada './components/Chat.vue';

eksport lalai {

komponen: {

Chat,

};

font-family: 'Avenir', Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;

Pada ketika ini, kami telah menyelesaikan sembang WeChat tiruan Realisasi kesan khas.

6. Jalankan projek

$ npm run serve

Buka pelayar dan lawati http://localhost:8080, anda boleh melihat halaman dengan kesan sembang WeChat tiruan .

Kesimpulan:
Melalui langkah di atas, kami berjaya melaksanakan kesan sembang seperti WeChat menggunakan rangka kerja Vue.js. Melalui kesan khas ini, kami boleh lebih memahami komponenisasi dan ciri pengikatan data rangka kerja Vue.js, dan memberikan idea untuk pembangunan untuk melaksanakan antara muka sembang seperti WeChat.