龙空技术网

一个基于Vue和ElementUI极简的聊天框组件

GitHub精选 3978

前言:

而今兄弟们对“html 聊天框”可能比较珍视,大家都想要学习一些“html 聊天框”的相关资讯。那么小编同时在网络上收集了一些有关“html 聊天框””的相关内容,希望大家能喜欢,看官们快快来了解一下吧!

《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个基于Vue和ElementUI极简的聊天框组件——JwChat。

JwChat 是一个借鉴 AVue、element-ui 进行开发的 IM 组件,只需一个标签就可呈现通讯界面。通讯界面包括聊天常用功能:发送文字、语音、表情、图片、视频、文件,群组,快捷回复等。

功能特性简化流程: 设计简洁直观的操作流程清晰明确: 语言表达清晰且表意明确,让用户快速理解进而作出决策帮助用户识别: 界面简单直白,让用户快速识别而非回忆,减少用户的记忆负担用户决策: 根据场景可给予用户操作建议或安全提示,但不能代替用户进行决策结果可控: 用户可以自由地进行操作,包括撤销、回退和终止当前操作等

安装使用安装

使用yarn安装:

yarn add jwchat

使用npm安装:

npm i jwchat

国内网络不好的同学可使用cnpm安装:

cnpm i jwchat -S
使用

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

npm install element-ui

2. 在 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)

3. 在 *.vue 中引入

<JwChat-index    :taleList="list"    @enter="bindEnter"    v-model="inputMsg"    :showRightBox='true'    scrollType="noscroll" />

组件基础组件Chatchat组件界面右边栏-仿QQ群快捷回复组件用户组件empty组件

更多内容大家可自行前往阅读。

开源地址:

标签: #html 聊天框