vue-simple-chat

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} 加入的房间id

  • curUserId{String} 当前用户的id

  • sender{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