basic vue chat
1.0.0
Implementasi obrolan berbasis VUE.
Anda dapat menginstal komponen menggunakan manajer paket, seperti NPM atau benang atau menginstal komponen dari repositori.
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i Komponen menggunakan vue (paket vue ), fontawesome dan moment.js for vue ( vue-moment ).
Obrolan adalah komponen VUE tunggal, yang dapat Anda temukan di /src/components/basic-vue-chat/ . Untuk memulai, cukup impor komponen BasicVuechat dan masukkan baris berikut ke dalam kode HTML Anda:
< basic-vue-chat />Untuk mendorong pesan untuk mengobrol, lulus saja Newmessage Prop ke BasicVuechat . Contoh:
< basic-vue-chat :new-message =" message " /> Objek message di atas dapat menjadi bagian dari data dalam komponen VUE Anda di mana Anda akan menggunakan BasicVuechat.
Contoh struktur pesan yang benar:
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} Anda dapat menemukan contoh mendorong pesan di file App.vue .
Ketika pengguna mengirim pesan, pesan disebarkan ke komponen BasicVuechat dan acara NewownMessage dipancarkan . Untuk menangani acara ini, misalnya Anda dapat melakukan ini:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> Di mana onNewOwnMessage(message) adalah metode dalam komponen VUE Anda di mana Anda akan menggunakan BasicVuechat.
Contoh struktur muatan acara yang benar:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} Anda dapat mengunggah dan menerima gambar. Untuk melampirkan gambar, gunakan tombol jepit kertas. Gambar akan dipancarkan dalam pesan pada image (sebagai objek File ) dan Properti imageUrl (Path string ).
Untuk memulai pengembangan, Anda dapat menggunakan Hot Reload Mode:
npm run serve
Untuk membangun versi produksi:
npm run build
Untuk menjalankan tes:
npm test
Untuk melampirkan data mock, cukup lulus Logic Prop attachMock ke BasicVuechat.
Gaya diimpor dalam komponen dan variabel BasicVueChat utama memiliki nilai !default , sehingga berarti Anda dapat mengganti nilai default dengan mendefinisikan variabel Anda sendiri sebelum gaya impor.
< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary
@import " ../../assets/scss/main.scss " ;
</ style > Lulus title prop ke komponen BasicVuechat.
< basic-vue-chat :title =" 'My Best Team' " /> Lulus prop initialFeed ke komponen BasicVuechat.
< basic-vue-chat :initial-feed =" feed " />Contoh struktur data yang benar:
const feed = [
{
id : 1 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
contents : 'hi there' ,
date : '16:30'
} ,
{
id : 0 ,
author : 'Me' ,
contents : 'hello' ,
date : '16:30'
}
] Lulus prop initialAuthorId dan komponen basicvuechat untuk mendefinisikan ID pengguna saat ini. Nilai default adalah 0 .
Obrolan menggunakan SCSS, sehingga Anda dapat dengan mudah mengganti variabel yang digunakan dalam proyek. Anda dapat menemukannya di /src/assets/scss/modules/_variables.scss . Semua variabel memiliki nilai default.
| Keterangan | Variabel | Nilai default |
|---|---|---|
| Warna utama | $ primer | $ Slate-Blue (#6B63D8) |
| Warna sekunder | $ sekunder | $ lavender (#B284ED) |
| Warna header | $ header-color | $ ghost-white (#faf9ff) |
| Warna latar belakang input | $ input-background-color | $ alice-blue (#f2efff) |
| Keluarga Font | $ font-family | 'Sumber Sans Pro', sans-serif |
| Berat font | $ font-weight | 400 |
| Ukuran font | $ font-size | 14px |
| Warna teks gelap | $ dark-text-color | $ Madison (#2C3E50) |
| Warna teks terang | $ light-text-color | $ ghost-white (#faf9ff) |
| Warna latar belakang gelap | $ Dark-Bg | $ Madison (#2C3E50) |
| Warna latar belakang cahaya | $ Light-Bg | $ white (#ffffff) |
| Lebar jendela obrolan | $ window-width | 500px |
| Tinggi jendela obrolan | $ window-tinggi | 400px |
| Pesan Max Width | $ pesan-max-lebar | 200px |
partialsmodulesbasic-vue-chatDikembangkan dan diuji di bawah MacOS High Sierra 10.13 dan Google Chrome 69.
