JwChat:一款基于Vue的极简聊天框组件
简洁至上以最少的代码实现最想要的功能。效率 Efficiency简化流程:设计简洁直观的操作流程;清晰明确:语言表达清晰且表意明确,让用户快速理解进而作出决策;帮助用户识别:界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。#可控 Controllability用户决策:根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;结果可控:用户可以自由的进行操作,包括撤销、回退和终止当前操
·
简洁至上
以最少的代码实现最想要的功能。
效率 Efficiency
- 简化流程: 设计简洁直观的操作流程;
- 清晰明确: 语言表达清晰且表意明确,让用户快速理解进而作出决策;
- 帮助用户识别: 界面简单直白,让用户快速识别而非回忆,减少用户记忆负担。
#可控 Controllability
- 用户决策: 根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策;
- 结果可控: 用户可以自由的进行操作,包括撤销、回退和终止当前操作等。
快速安装
# 使用yarn安装。
yarn add jwchat
# 或者
npm install jwchat
使用npm安装。
npm i 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 JwChat from 'jwchat'; /* 在 0.2.041 之前的版本需要引入 css */ // import 'jwchat/lib/JwChat.css'; Vue.use(JwChat)
- 在 *.vue 中引入
-
<JwChat-index :taleList="list" @enter="bindEnter" v-model="inputMsg" :showRightBox='true' scrollType="noscroll" />
更多推荐
已为社区贡献6条内容
所有评论(0)