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. سوف يتفاعل ديناميكيًا مع التغييرات في الرسائل. يجب إضافة جميع الرسائل الجديدة عبر تغيير في الدعائم كما هو موضح في المثال.
| دعم | يكتب | وصف |
|---|---|---|
| *مشاركون | [ملف تعريف الوكيل] | يمثل وكلاء خدمة العملاء لمنتجك أو خدمتك. الحقول لكل وكيل: المعرف، الاسم، imageUrl |
| *onMessageWasSent | وظيفة (رسالة) | يتم استدعاؤه عند إرسال رسالة باستخدام كائن الرسالة كوسيطة. |
| * مفتوح | منطقية | المنطق الذي يشير إلى ما إذا كانت نافذة الدردشة يجب أن تكون مفتوحة أم لا. |
| *يفتح | وظيفة | تم تمرير الوظيفة إلى المكون الذي يقوم بتغيير مفتاح التبديل المنطقي المذكور أعلاه لفتح الدردشة |
| *يغلق | وظيفة | تم تمرير الوظيفة إلى المكون الذي يقوم بتغيير التبديل المنطقي المذكور أعلاه لإغلاق الدردشة |
| messageList | [رسالة] | مجموعة من كائنات الرسالة التي سيتم عرضها كمحادثة. |
| com.showEmoji | منطقية | رمز منطقي يشير إلى ما إذا كان سيتم إظهار زر الرموز التعبيرية أم لا |
| showFile | منطقية | منطقي يشير إلى ما إذا كان سيتم إظهار زر منتقي الملفات أم لا |
| showDeletion | منطقية | منطقي يشير إلى ما إذا كان سيتم إظهار زر التحرير للرسالة أم لا |
| showEdition | منطقية | منطقي يشير إلى ما إذا كان سيتم إظهار زر الحذف للرسالة أم لا |
| showTypingIndicator | خيط | سلسلة يمكن ضبطها على معرف المشارك الخاص بالمستخدم لإظهار مؤشر typing له |
| showHeader | منطقية | منطقي يشير إلى ما إذا كان سيتم إظهار رأس نافذة الدردشة أم لا |
| DisableUserListToggle | منطقية | منطقي يشير إلى ما إذا كان سيتم السماح للمستخدم بالتبديل بين قائمة الرسائل وقائمة المشاركين أم لا |
| الألوان | هدف | كائن يحتوي على مواصفات الألوان المستخدمة لطلاء المكون. انظر هنا |
| messageStyling | منطقية | منطقي يشير إلى ما إذا كان سيتم تمكين دعم msgdown لتنسيق الرسائل في الدردشة أم لا. انظر هنا |
| حدث | المعلمات | وصف |
|---|---|---|
| onType | غير محدد | يتم تشغيله عندما يكتب المستخدم على إدخال الرسالة |
| يحرر | 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
يرجى الاتصال بنا إذا كنت ترغب في الانضمام كمساهم .
