vue聊天组件移动端_一个简单而美丽的Vue聊天组件后端不可知
vue聊天组件移动端 唯美聊天 (vue-beautiful-chat)A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.一个简单而美丽的Vue聊天组件后端不可知,可完全自定义和扩展。View demo查看演示 Download Source下载...
vue聊天组件移动端
唯美聊天 (vue-beautiful-chat)
A simple and beautiful Vue chat component backend agnostic, fully customisable and extendable.
一个简单而美丽的Vue聊天组件后端不可知,可完全自定义和扩展。
vue-beautiful-chat provides an intercom-like chat window that can be included easily in any project for free. It provides no messaging facilities, only the view component.
vue-beautiful-chat提供了一个类似于内部通信的聊天窗口,可以轻松将其免费包含在任何项目中。 它不提供消息传递功能,仅提供视图组件。
特征 (Features)
Customizeable
可订制
Backend agnostic
后端不可知
Free
自由
安装 (Installation)
$ yarn add vue-beautiful-chat
例 (Example)
import Chat from 'vue-beautiful-chat'
Vue.use(Chat)
<template>
<div>
<beautiful-chat
:agentProfile="agentProfile"
:onMessageWasSent="onMessageWasSent"
:messageList="messageList"
:newMessagesCount="newMessagesCount"
:isOpen="isChatOpen"
:close="closeChat"
:open="openChat"
:showEmoji="true"
:showFile="true" />
<a href="#" @click.prevent="openChat()">Open the chat window</a>
</div>
</template>
export default {
data() {
return {
agentProfile: {
teamName: 'Vue Beautiful Chat',
imageUrl: 'https://a.slack-edge.com/66f9/img/avatars-teams/ava_0001-34.png'
},
messageList: [],
newMessagesCount: 0,
isChatOpen: false
}
},
methods: {
sendMessage (msg) {
if (text.length > 0) {
this.newMessagesCount = this.isChatOpen ? this.newMessagesCount : this.newMessagesCount + 1
this.messageList.push(msg)
}
},
onMessageWasSent (msg) {
this.messageList.push(msg)
},
openChat () {
this.isChatOpen = true
this.newMessagesCount = 0
},
closeChat () {
this.isChatOpen = false
}
}
}
For more detailed examples see the demo folder.
有关更多详细示例,请参见demo文件夹。
组件 (Components)
发射器 (Launcher)
Launcher
is the only component needed to use vue-beautiful-chat. It will react dynamically to changes in messages. All new messages must be added via a change in props as shown in the example.
Launcher
是使用vue-beautiful-chat所需的唯一组件。 它将动态响应消息中的更改。 如示例所示,必须通过更改道具来添加所有新消息。
Launcher props:
发射器道具:
prop | type | description |
---|---|---|
*agentProfile | object | Represents your product or service's customer service agent. Fields: teamName, imageUrl |
*onMessageWasSent | function(message) | Called when a message a message is sent with a message object as an argument. |
*isOpen | Boolean | The bool indicating whether or not the chat window should be open. |
*open | Function | The function passed to the component that mutates the above mentioned bool toggle for opening the chat |
*close | Function | The function passed to the component that mutates the above mentioned bool toggle for closing the chat |
messageList | [message] | An array of message objects to be rendered as a conversation. |
showEmoji | Boolean | A bool indicating whether or not to show the emoji button |
showFile | Boolean | A bool indicating whether or not to show the file chooser button |
showTypingIndicator | Boolean | A bool indicating whether or not to show the typing indicator |
colors | Object | An object containing the specs of the colors used to paint the component. See here |
Struts | 类型 | 描述 |
---|---|---|
* agentProfile | 目的 | 代表您的产品或服务的客户服务代理。 字段:teamName,imageUrl |
* onMessageWasSent | 功能(留言) | 当消息以消息对象作为参数发送消息时调用。 |
*开了 | 布尔型 | 布尔值指示是否应打开聊天窗口。 |
*打开 | 功能 | 传递给该组件的函数,该组件使上述bool触发器发生突变以打开聊天室 |
*关 | 功能 | 传递给该组件的函数,该组件使上述bool触发器发生突变以关闭聊天室 |
messageList | [信息] | 消息对象数组,将其呈现为对话。 |
showEmoji | 布尔型 | 指示是否显示表情符号按钮的布尔值 |
showFile | 布尔型 | 指示是否显示文件选择器按钮的布尔值 |
showTypingIndicator | 布尔型 | 指示是否显示typing 指示符的布尔值 |
颜色 | 目的 | 包含用于绘制组件的颜色规格的对象。 看这里 |
讯息对象 (Message Objects)
Message objects are rendered differently depending on their type. Currently, only text, emoji and file types are supported. Each message object has an author
field which can have the value 'me' or 'them'.
消息对象的呈现方式取决于它们的类型。 当前,仅支持文本,表情符号和文件类型。 每个消息对象都有一个author
字段,该字段可以具有值“ me”或“ them”。
{
author: 'them',
type: 'text',
data: {
text: 'some text'
}
}
{
author: 'me',
type: 'emoji',
data: {
code: 'someCode'
}
}
{
author: 'me',
type: 'file',
data: {
name: 'file.mp3',
url: 'https:123.rf/file.mp3'
}
}
常问问题 (FAQ)
How to get the demo working?
如何使演示工作?
cd vue-beautiful-chat
cd vue-beautiful-chat
yarn watch
# this starts the compiler so everytime you edit files they get compiledyarn watch
#这会启动编译器,因此每次您编辑文件时,它们都会被编译cd demo
cd demo
yarn dev
# this starts a web server on localhost:8080 so the demo shows up - it also watches for the demo files changesyarn dev
#这将在localhost:8080上启动Web服务器,因此演示将显示-它还监视演示文件的更改
How can I add a feature or fix a bug?
如何添加功能或修复错误?
Fork the repository
分叉存储库
Fix/add your changes
修正/添加您的更改
yarn build
on the root to have the library compiled with your latest changes在根目录上
yarn build
,以使用最新更改编译库create a pull request describing what you did
创建一个描述您所做的请求请求
discuss the changes with the maintainer
与维护者讨论变更
boom! your changes are added to the main repo
繁荣! 您的更改将添加到主存储库中
a release is created almost once per week 😉
一个发布几乎每周创建一次created
How can I customize the colors?
如何自定义颜色?
When initializing the component, pass an object specifying the colors used:
初始化组件时,传递一个对象,指定使用的颜色:
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" />
翻译自: https://vuejsexamples.com/a-simple-and-beautiful-vue-chat-component-backend-agnostic/
vue聊天组件移动端
更多推荐
所有评论(0)