JwChat 是一个借鉴 AVue、element-ui 进行开发的 IM 组件,只需一个标签就可呈现通讯界面。通讯界面包括聊天常用功能:发送文字、语音、表情、图片、视频、文件,群组,快捷回复等。
功能特性
• 简化流程:设计简洁直观的操作流程
• 清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策
• 帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户的记忆负担
• 用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策
• 结果可控:用户可以自由地进行操作,包括撤销、回退和终止当前操作等
组件:基础组件、chat组件界面、右边栏-仿QQ群、快捷回复组件、用户组件、empty组件
安装使用
使用yarn 或者 npm 安装
1 | yarn add jwchat |
1 | npm i jwchat |
因为本组件是基于 element-ui 开发。
首先需要引入 element-ui
1 | npm install element-ui |
在 main.js 中引入组件
1 2 3 4 5 6 7 8 | import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); import JwChat from 'jwchat'; /* 在 0.2.041 之前的版本需要引入 css */ // import 'jwchat/lib/JwChat.css'; Vue.use(JwChat) |
在 *.vue 中引入
1 2 3 4 5 6 7 | <JwChat-index :taleList="list" @enter="bindEnter" v-model="inputMsg" :showRightBox='true' scrollType="noscroll" /> |
开源协议:MIT
开源地址:https://gitee.com/CodeGI/chat
原文链接:https://xiaohost.com/11581.html,转载请注明出处。