JwChat

介绍

一款基于Vue和ElementUI极简的聊天框组件
本项目是一款极简的数据驱动为主的聊天框组件。
新增表情包可自动匹配微信表情。
新增聊天窗口配置组件，可以自由配置 顶部状态栏 和 右侧信息栏


安装

• 使用 npm 安装

bash npm install jwchat

• 使用 yarn 安装

bash yarn add jwchat

文档

官方文档

使用

1. 因为本组件是基于 element-ui 开发。首先需要引入 element-ui。

bash npm install element-ui

1. 在 main.js 中引入组件

``` 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)
```

1. 在 *.vue 中引入

vue <JwChat-index :taleList="list" @enter="bindEnter" @bindCover="bindCover" v-model="inputMsg" :toolConfig="tool" />


组件文档

• chatIndex组件文档
• chat组件文档
• rightbox(仿qq群右侧)
• talk快捷回复
• user单个用户展示
• 用户资料卡

参数配置

Attribute

| v-model | 输入框中的文字 | String | - | "" |
| taleList | 会话内容 | Array | - | [] |
| toolConfig | 工具烂配置 | Object | - | {} |
| width | 聊天框宽度 | string | - | 550px |
| height | 聊天框高度 | string | - | 500px |

Methods

• taleList

// 格式
[
    {
        "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 用户头像

• toolConfig

{
    // file img video 现在只配置了三个图标
    show: ['file', 'img'],
    callback: this.toolEvent
}
    
 toolEvent (type/* 当前点击的按钮类型 */) {
     alert(type)
 }    

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

声明

• 本代码借鉴于AVue

交流学习

• 球球群 ：235689934