代码拉取完成，页面将自动刷新
同步操作将从 四铢半两/JwChat 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
一款基于Vue和ElementUI极简的聊天框组件 本项目是一款极简的数据驱动为主的聊天框组件。 新增表情包可自动匹配微信表情。 新增聊天窗口配置组件，可以自由配置 顶部状态栏 和 右侧信息栏
使用 npm 安装
npm install jwchat
使用 yarn 安装
yarn add jwchat
因为本组件是基于 element-ui 开发。首先需要引入 element-ui。
npm install element-ui
在 main.js 中引入组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
import Chat from 'jwchat';
import 'jwchat/lib/JwChat.css';
Vue.use(Chat)
在 *.vue 中引入
<JwChat-index
:taleList="list"
@enter="bindEnter"
@bindCover="bindCover"
v-model="inputMsg"
:toolConfig="tool"
/>
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 输入框中的文字 | String | - | "" |
| taleList | 会话内容 | Array | - | [] |
| toolConfig | 工具烂配置 | Object | - | {} |
| width | 聊天框宽度 | string | - | 550px |
| height | 聊天框高度 | string | - | 500px |
| 参数 | 说明 | 参数 |
|---|---|---|
| enter | 输入框点击就发送或者回车触发的事件 | 输入框中的文字 |
// 格式
[
{
"date": "2020/04/25 21:19:07",
"text": { "text": "起床不" },
"mine": false,
"name": "只盼流星不盼雨",
"img": "image/two.jpeg"
},
{
"date": "2020/04/16 21:19:07",
"text": { "text": "我不饿" },
"mine": true,
"name": "留恋人间不羡仙",
"img": "image/three.jpeg"
},
]
// data 用来展示时间数据
// text 用来展示本条会话内容
// mine 本条数据是否是我发的
// img 用户头像
{
// file img video 现在只配置了三个图标
show: ['file', 'img'],
callback: this.toolEvent
}
toolEvent (type/* 当前点击的按钮类型 */) {
alert(type)
}
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。