JwChat：一款基於Vue和ElementUI的極簡聊天框組件

項目名稱：JwChat

項目作者：四銖半兩

開源許可協議：MIT

 

項目簡介

一款基於 Vue 和 ElementUI 的極簡聊天框組件。本項目是一款極簡的數據驅動爲主的聊天框組件，新增表情包可自動匹配微信表情， 新增聊天窗口配置組件，可以自由配置 頂部狀態欄 和 右側信息欄。JwChat 的代碼借鑑於 AVue。

• 效率
  • 簡化流程： 設計簡潔直觀的操作流程；
  • 清晰明確： 語言表達清晰且表意明確，讓用戶快速理解進而作出決策；
  • 幫助用戶識別： 界面簡單直白，讓用戶快速識別而非回憶，減少用戶記憶負擔。
• 可控
  • 用戶決策： 根據場景可給予用戶操作建議或安全提示，但不能代替用戶進行決策；
  • 結果可控： 用戶可以自由的進行操作，包括撤銷、回退和終止當前操作等。

 

安裝

• 使用 npm 安裝

npm install jwchat

• 使用 yarn 安裝

yarn add jwchat

 

使用

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 Chat from 'jwchat';
import 'jwchat/lib/JwChat.css';
Vue.use(Chat)

3.在 *.vue 中引入

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

 

項目地址

前往 Gitee 搜索 JwChat 或點擊後面的鏈接即可訪問項目主頁：https://gitee.com/CodeGI/chat

查看更多 IM 相關開源項目點擊這裏：https://gitee.com/explore/im