JwChat:一款基于Vue和ElementUI的极简聊天框组件
项目名称:JwChat
项目作者:四铢半两
开源许可协议:MIT
项目简介
一款基于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'; /* 在 0.2.041 之前的版本需要引入 css */ // import 'jwchat/lib/JwChat.css'; Vue.use(Chat)
-
在
*.vue
中引入<JwChat-index :taleList="list" @enter="bindEnter" v-model="inputMsg" :toolConfig="tool" />
文档
跟新公告
+新增 +新增 /修复
项目地址
前往 Gitee 搜索 JwChat 或点击后面的链接即可访问项目主页: https://gitee.com/CodeGI/chat
「其他文章」
- API 文档简洁之美,只需三步开启
- Kotlin 和 Jetpack 视频合集 | MAD Skills
- 实战 Java 16 值类型 Record - 1. Record 的默认方法使用以及基于预编译生成相关字节码的底层实现
- 优先使用 KTX 库 | MAD Skills
- 实操搭建企业级Harbor v1.10.6
- 推荐一个开源文件管理系统,简单好用
- 一文搞懂MySQL体系架构!!
- 使用Documentfragment优化DOM操作
- 深入理解浏览器缓存机制
- 百度搜索与推荐引擎的云原生改造 | Geek大咖说第一期
- 聊聊LiteOS事件模块的结构体、初始化及常用操作
- 从零搭建自己的社区系统,这个开源项目值得拥有
- 茫茫内存,我该如何用 windbg 找到你 ?
- Java中对象的生与灭- 核心篇
- 使用JavaScript学习设计模式
- 一文带你剖析LiteOS互斥锁Mutex源代码
- 小胖问我:MySQL 事务与 MVCC 原理?
- 免费正版 IntelliJ IDEA license 详细指南
- 纯函数是什么?怎么合理运用纯函数?
- 聊聊dddsample-core的Specification