vue beautiful chat
v2.5.0
vue-beautiful-chat menyediakan jendela obrolan seperti interkom yang dapat disertakan dengan mudah dalam proyek apa pun secara gratis. Ini tidak menyediakan fasilitas perpesanan, hanya komponen tampilan.
vue-beautiful-chat sedang porting ke vue dari react-beautiful-chat (yang dapat Anda temukan di sini)
Buka FAQ
$ yarn add vue-beautiful-chat
import Chat from 'vue-beautiful-chat'
Vue . use ( Chat ) < template >
< div >
< beautiful-chat
:participants = " participants "
:titleImageUrl = " titleImageUrl "
:onMessageWasSent = " onMessageWasSent "
:messageList = " messageList "
:newMessagesCount = " newMessagesCount "
:isOpen = " isChatOpen "
:close = " closeChat "
:icons = " icons "
:open = " openChat "
:showEmoji = " true "
:showFile = " true "
:showEdition = " true "
:showDeletion = " true "
:showTypingIndicator = " showTypingIndicator "
:showLauncher = " true "
:showCloseButton = " true "
:colors = " colors "
:alwaysScrollToBottom = " alwaysScrollToBottom "
:disableUserListToggle = " false "
:messageStyling = " messageStyling "
@onType = " handleOnType "
@edit = " editMessage " />
</ div >
</ template > export default {
name : 'app' ,
data ( ) {
return {
participants : [
{
id : 'user1' ,
name : 'Matteo' ,
imageUrl : 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'
} ,
{
id : 'user2' ,
name : 'Support' ,
imageUrl : 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'
}
] , // the list of all the participant of the conversation. `name` is the user name, `id` is used to establish the author of a message, `imageUrl` is supposed to be the user avatar.
titleImageUrl : 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png' ,
messageList : [
{ type : 'text' , author : `me` , data : { text : `Say yes!` } } ,
{ type : 'text' , author : `user1` , data : { text : `No.` } }
] , // the list of the messages to show, can be paginated and adjusted dynamically
newMessagesCount : 0 ,
isChatOpen : false , // to determine whether the chat window should be open or closed
showTypingIndicator : '' , // when set to a value matching the participant.id it shows the typing indicator for the specific user
colors : {
header : {
bg : '#4e8cff' ,
text : '#ffffff'
} ,
launcher : {
bg : '#4e8cff'
} ,
messageList : {
bg : '#ffffff'
} ,
sentMessage : {
bg : '#4e8cff' ,
text : '#ffffff'
} ,
receivedMessage : {
bg : '#eaeaea' ,
text : '#222222'
} ,
userInput : {
bg : '#f4f7f9' ,
text : '#565867'
}
} , // specifies the color scheme for the component
alwaysScrollToBottom : false , // when set to true always scrolls the chat to the bottom when new events are in (new message, user starts typing...)
messageStyling : true // enables *bold* /emph/ _underline_ and such (more info at github.com/mattezza/msgdown)
}
} ,
methods : {
sendMessage ( text ) {
if ( text . length > 0 ) {
this . newMessagesCount = this . isChatOpen ? this . newMessagesCount : this . newMessagesCount + 1
this . onMessageWasSent ( { author : 'support' , type : 'text' , data : { text } } )
}
} ,
onMessageWasSent ( message ) {
// called when the user sends a message
this . messageList = [ ... this . messageList , message ]
} ,
openChat ( ) {
// called when the user clicks on the fab button to open the chat
this . isChatOpen = true
this . newMessagesCount = 0
} ,
closeChat ( ) {
// called when the user clicks on the botton to close the chat
this . isChatOpen = false
} ,
handleScrollToTop ( ) {
// called when the user scrolls message list to top
// leverage pagination for loading another page of messages
} ,
handleOnType ( ) {
console . log ( 'Emit typing event' )
} ,
editMessage ( message ) {
const m = this . messageList . find ( m => m . id === message . id ) ;
m . isEdited = true ;
m . data . text = message . data . text ;
}
}
}Untuk contoh lebih detail lihat folder demo.
Launcher adalah satu-satunya komponen yang diperlukan untuk menggunakan vue-beautiful-chat. Ini akan bereaksi secara dinamis terhadap perubahan pesan. Semua pesan baru harus ditambahkan melalui perubahan props seperti yang ditunjukkan pada contoh.
| menopang | jenis | keterangan |
|---|---|---|
| *peserta | [Profil agen] | Mewakili agen layanan pelanggan produk atau layanan Anda. Bidang untuk setiap agen: id, nama, imageUrl |
| *pada Pesan Telah Terkirim | fungsi (pesan) | Dipanggil ketika pesan dikirim dengan objek pesan sebagai argumen. |
| *Terbuka | Boolean | Bool yang menunjukkan apakah jendela obrolan harus dibuka atau tidak. |
| *membuka | Fungsi | Fungsi diteruskan ke komponen yang mengubah tombol bool yang disebutkan di atas untuk membuka obrolan |
| *menutup | Fungsi | Fungsi diteruskan ke komponen yang memutasi tombol bool yang disebutkan di atas untuk menutup obrolan |
| Daftar pesan | [pesan] | Serangkaian objek pesan yang akan dirender sebagai percakapan. |
| tampilkan Emoji | Boolean | Bool yang menunjukkan apakah akan menampilkan tombol emoji atau tidak |
| tampilkanFile | Boolean | Bool yang menunjukkan apakah akan menampilkan tombol pemilih file atau tidak |
| tampilkan Penghapusan | Boolean | Bool yang menunjukkan apakah akan menampilkan tombol edit untuk sebuah pesan atau tidak |
| tampilkan Edisi | Boolean | Bool yang menunjukkan apakah akan menampilkan tombol hapus untuk sebuah pesan atau tidak |
| tampilkan Indikator Pengetikan | Rangkaian | String yang dapat disetel ke partisipan.id pengguna untuk menampilkan indikator typing bagi mereka |
| showHeader | Boolean | Bool yang menunjukkan apakah akan menampilkan header jendela obrolan atau tidak |
| nonaktifkanUserListToggle | Boolean | Bool yang menunjukkan apakah pengguna boleh beralih antara daftar pesan dan daftar peserta atau tidak |
| warna | Obyek | Sebuah objek yang berisi spesifikasi warna yang digunakan untuk mengecat komponen. Lihat di sini |
| gaya pesan | Boolean | Bool yang menunjukkan apakah akan mengaktifkan dukungan msgdown untuk pemformatan pesan dalam obrolan atau tidak. Lihat di sini |
| peristiwa | param | keterangan |
|---|---|---|
| padaJenis | belum diartikan | Diaktifkan saat pengguna mengetik input pesan |
| sunting | message | Diaktifkan setelah pesan diedit pengguna |
Mengganti header default.
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template > Mengganti avatar pengguna. Params: message , user
< template v-slot : user-avatar = " { message , user } " >
< div style = " border-radius : 50 % ; color : pink ; font-size : 15 px ; line-height : 25 px ; text-align : center ; background : tomato ; width : 25 px !important ; height : 25 px !important ; min-width : 30 px ; min-height : 30 px ; margin : 5 px ; font-weight : bold " v-if = " message.type === 'text' && user && user.name " >
{{user.name.toUpperCase()[0]}}
</ div >
</ template > Ubah penurunan harga untuk pesan teks. Param: message
< template v-slot : text-message-body = " { message } " >
< small style = " background : red " v-if = " message.meta " >
{{message.meta}}
</ small >
{{message.text}}
</ template > Ubah penurunan harga untuk pesan sistem. Param: message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template > Objek pesan dirender secara berbeda bergantung pada tipenya. Saat ini, hanya jenis teks, emoji, dan file yang didukung. Setiap objek pesan memiliki kolom author yang dapat memiliki nilai 'saya' atau id agen terkait.
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
}
}
{
author : 'me' ,
type : 'emoji' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
code : 'someCode'
}
}
{
author : 'me' ,
type : 'file' ,
id : 1 , // or text '1'
isEdited : false ,
data : {
file : {
name : 'file.mp3' ,
url : 'https:123.rf/file.mp3'
}
}
} Saat mengirim pesan, Anda dapat memberikan kumpulan kalimat yang akan ditampilkan di obrolan pengguna sebagai balasan cepat. Menambahkan bidang suggestions pada objek pesan dengan nilai array string akan memicu fungsi ini
{
author : 'support' ,
type : 'text' ,
id : 1 , // or text '1'
data : {
text : 'some text' ,
meta : '06-16-2019 12:43'
} ,
suggestions : [ 'some quick reply' , ... , 'another one' ]
} git clone [email protected]:mattmezza/vue-beautiful-chat.git
cd vue-beautiful-chat
yarn install # this installs the package dependencies
yarn watch # this watches files to continuously compile them
Buka shell baru di folder yang sama
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build di root agar perpustakaan dikompilasi dengan perubahan terbaru Anda let redColors = {
header : {
bg : '#D32F2F' ,
text : '#fff'
} ,
launcher : {
bg : '#D32F2F'
} ,
messageList : {
bg : '#fff'
} ,
sentMessage : {
bg : '#F44336' ,
text : '#fff'
} ,
receivedMessage : {
bg : '#eaeaea' ,
text : '#222222'
} ,
userInput : {
bg : '#fff' ,
text : '#212121'
}
} < beautiful-chat
...
: colors = " redColors " />Ini adalah varian merah. Silakan periksa file ini untuk daftar varian yang ditampilkan di halaman demo online.
Harap dicatat bahwa Anda harus meneruskan Objek yang berisi masing-masing properti warna jika tidak, validasi akan gagal.
Kabar baik, pemformatan pesan telah ditambahkan untuk Anda. Anda dapat mengaktifkannya dengan mengatur messageStyling ke true dan Anda akan menggunakan perpustakaan msgdown. Anda dapat mengaktifkan/menonaktifkan dukungan pemformatan kapan saja, atau Anda dapat membiarkan pengguna melakukannya kapan pun mereka mau.
@a-kriya, @mattmezza
Silakan menghubungi kami jika Anda ingin bergabung sebagai kontributor .
