vue beautiful chat
v2.5.0
vue-beautiful-chat มีหน้าต่างแชทเหมือนอินเตอร์คอมที่สามารถรวมเข้ากับโปรเจ็กต์ใดก็ได้ฟรี ไม่มีสิ่งอำนวยความสะดวกในการส่งข้อความ มีเพียงองค์ประกอบมุมมองเท่านั้น
vue-beautiful-chat กำลังย้ายไปยัง vue of react-beautiful-chat (ซึ่งคุณสามารถหาได้ที่นี่)
ไปที่คำถามที่พบบ่อย
$ 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 ;
}
}
}สำหรับตัวอย่างโดยละเอียดเพิ่มเติม โปรดดูโฟลเดอร์สาธิต
Launcher เป็นองค์ประกอบเดียวที่จำเป็นในการใช้ vue-beautiful-chat มันจะตอบสนองต่อการเปลี่ยนแปลงในข้อความแบบไดนามิก ต้องเพิ่มข้อความใหม่ทั้งหมดผ่านการเปลี่ยนแปลงอุปกรณ์ประกอบฉากตามที่แสดงในตัวอย่าง
| ข้อเสนอ | พิมพ์ | คำอธิบาย |
|---|---|---|
| *ผู้เข้าร่วม | [โปรไฟล์ตัวแทน] | หมายถึงตัวแทนฝ่ายบริการลูกค้าของผลิตภัณฑ์หรือบริการของคุณ ฟิลด์สำหรับแต่ละเอเจนต์: id, name, imageUrl |
| *onMessageWasSent | ฟังก์ชั่น(ข้อความ) | เรียกว่าเมื่อมีการส่งข้อความโดยมีวัตถุข้อความเป็นอาร์กิวเมนต์ |
| *คือเปิด | บูลีน | บูลที่ระบุว่าควรเปิดหน้าต่างแชทหรือไม่ |
| *เปิด | การทำงาน | ฟังก์ชั่นที่ส่งผ่านไปยังส่วนประกอบที่กลายพันธุ์การสลับบูลที่กล่าวถึงข้างต้นเพื่อเปิดแชท |
| *ปิด | การทำงาน | ฟังก์ชันที่ส่งผ่านไปยังส่วนประกอบที่เปลี่ยนการสลับบูลที่กล่าวถึงข้างต้นเพื่อปิดแชท |
| รายการข้อความ | [ข้อความ] | อาร์เรย์ของวัตถุข้อความที่จะแสดงผลเป็นการสนทนา |
| แสดงอีโมจิ | บูลีน | บูลที่ระบุว่าจะแสดงปุ่มอีโมจิหรือไม่ |
| showFile | บูลีน | บูลที่ระบุว่าจะแสดงปุ่มเลือกไฟล์หรือไม่ |
| แสดงการลบ | บูลีน | บูลที่ระบุว่าจะแสดงปุ่มแก้ไขสำหรับข้อความหรือไม่ |
| แสดงฉบับ | บูลีน | บูลที่ระบุว่าจะแสดงปุ่มลบสำหรับข้อความหรือไม่ |
| แสดงตัวบ่งชี้การพิมพ์ | สตริง | สตริงที่สามารถตั้งค่าเป็น participant.id ของผู้ใช้เพื่อแสดงตัวบ่งชี้ typing ให้พวกเขา |
| showHeader | บูลีน | บูลที่ระบุว่าจะแสดงส่วนหัวของหน้าต่างแชทหรือไม่ |
| ปิดการใช้งาน UserListToggle | บูลีน | บูลที่ระบุว่าจะอนุญาตให้ผู้ใช้สลับระหว่างรายการข้อความและรายชื่อผู้เข้าร่วมหรือไม่ |
| สี | วัตถุ | วัตถุที่มีข้อมูลจำเพาะของสีที่ใช้ในการทาสีส่วนประกอบ ดูที่นี่ |
| ข้อความสไตล์ | บูลีน | บูลที่ระบุว่าจะเปิดใช้งานการรองรับ msgdown สำหรับการจัดรูปแบบข้อความในการแชทหรือไม่ ดูที่นี่ |
| เหตุการณ์ | พารามิเตอร์ | คำอธิบาย |
|---|---|---|
| บนประเภท | ไม่ได้กำหนด | เริ่มทำงานเมื่อผู้ใช้พิมพ์ข้อความที่ป้อน |
| แก้ไข | message | เริ่มทำงานหลังจากผู้ใช้แก้ไขข้อความ |
การแทนที่ส่วนหัวเริ่มต้น
< template v-slot : header >
? Good chat between {{participants.map(m=>m.name).join(' & ')}}
</ template > การแทนที่อวตารของผู้ใช้ พารามิเตอร์: 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 > เปลี่ยนมาร์กดาวน์สำหรับข้อความ พารามิเตอร์: message
< template v-slot : text-message-body = " { message } " >
< small style = " background : red " v-if = " message.meta " >
{{message.meta}}
</ small >
{{message.text}}
</ template > เปลี่ยนมาร์กดาวน์สำหรับข้อความระบบ พารามิเตอร์: message
< template v-slot : system-message-body = " { message } " >
[System]: {{message.text}}
</ template > ออบเจ็กต์ข้อความจะแสดงผลแตกต่างกันไปขึ้นอยู่กับประเภทของออบเจ็กต์ ปัจจุบันรองรับเฉพาะข้อความ อีโมจิ และประเภทไฟล์เท่านั้น ออบเจ็กต์ข้อความแต่ละรายการมีช่อง author ซึ่งสามารถมีค่า 'ฉัน' หรือรหัสของตัวแทนที่เกี่ยวข้องได้
{
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'
}
}
} เมื่อส่งข้อความ คุณสามารถจัดเตรียมชุดประโยคที่จะแสดงในแชทของผู้ใช้เป็นการตอบกลับด่วน การเพิ่มช่อง suggestions ลงในออบเจ็กต์ข้อความที่มีค่าอาร์เรย์ของสตริงจะเรียกใช้ฟังก์ชันนี้
{
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
เปิดเชลล์ใหม่ในโฟลเดอร์เดียวกัน
cd demo
yarn install # this installs the demo dependencies
yarn dev # this starts the dev server at http://localhost:8080
yarn build ขึ้นบนรูทเพื่อให้ไลบรารีรวบรวมการเปลี่ยนแปลงล่าสุดของคุณ 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 " />นี่คือรุ่นสีแดง โปรดตรวจสอบไฟล์นี้เพื่อดูรายการรุ่นที่แสดงในหน้าสาธิตออนไลน์
โปรดทราบว่าคุณต้องส่งวัตถุที่มีคุณสมบัติสีแต่ละอย่าง มิฉะนั้นการตรวจสอบจะล้มเหลว
ข่าวดี เราได้เพิ่มการจัดรูปแบบข้อความให้คุณแล้ว คุณสามารถเปิดใช้งานได้โดยตั้ง messageStyling ให้เป็น true และคุณจะใช้ไลบรารี msgdown คุณสามารถเปิด/ปิดการสนับสนุนการจัดรูปแบบได้ตลอดเวลา หรือคุณสามารถให้ผู้ใช้ดำเนินการได้ทุกเมื่อที่ต้องการ
@a-kriya, @mattmezza
โปรดติดต่อเราหากคุณต้องการเข้าร่วมเป็นผู้มีส่วนร่วม
