vue-simple-chat
v1.1.94
Published
A Vue component about chat
Downloads
33
Keywords
Readme
vue-simple-chat
一个基于 [signalR]的 Vue 聊天组件
功能
在线聊天
附件上传(文件+图片)待开发
聊天记录查看 待开发
安装
npm install @aspnet/signalr
npm i element-ui -S
npm install vue-simple-chat --save
笔记周边
- 待写todo
使用
初始化
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
import chat from 'vue-simple-chat'
Vue.use(ElementUI)
Vue.use(chat)
/* eslint-disable no-new */
new Vue({
render(createElement) {
return createElement(App)
}
}).$mount('#app')
App.vue
<template>
<div>
<chat :data="chatData" :sendData="sendData" :options="options" ref="chat"
@getRefreshVoteStatus="getRefreshVoteStatus" @getVoteResult="getVoteResult" @getNotification="getNotification"></chat>
用户名称<input type="text" v-model="options.sender">
用户ID<input type="text" v-model="options.curUserId">
<el-button @click="startConnect">{{options.connectFlag == '1' ? '断开' : '连接'}}</el-button>
</div>
</template>
<script>
export default {
name:'app',
data () {
return {
chatData:[],//聊天容器
options:{
targetApiUrl:'',//目标api地址 required
roomId:'',//加入的房间id required
curUserId:'',//当前用户的id required
sender:'',//发送人姓名 required
sendContent:'',//发送内容
avatarUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',//用户头像
role:'',//用户角色
connectFlag:-1,//用这个来控制连接开关,1开2关 required
},
sendData:{
methodName:'',//方法
connectObject:{}//传入的数据
},
}
},
methods: {
startConnect(){
if(this.options.connectFlag == 1){
this.options.connectFlag =2
}else{
this.options.connectFlag =1
}
},
//获取状态
getRefreshVoteStatus(val){},
//获取投票结果
getVoteResult(val){},
//获取后端返回消息
getNotification(val){
console.log('val',val)
},
},
}
</script>
组件
Props
options {Object}
必填配置项:
targetApiUrl{String}
目标api地址roomId{String}
加入的房间idcurUserId{String}
当前用户的idsender{String}
发送人姓名connectFlag{Number}
用这个来控制连接开关 1开2关
此外,你可以有如下配置项可选:
sendContent{String}
发送内容avatarUrl{String}
用户头像 示例:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' (无传入值则显示该头像)role{String}
用户角色
data [Array]
默认:
[]
作为聊天框容器,可以传入需要显示的历史聊天数据。
sendData {Object}
必填配置项:
methodName{String}
对应后端invoke的方法名字connectObject{String | Object}
对后端invoke的方法的传参
事件
注意:
getRefreshVoteStatus
获得投票状态getVoteResult
获取投票结果getNotification
获得返回消息
Development
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report