在功能介绍之前特别感谢 june
作者提供的这一套 Lemon-IMUI
聊天组件,里面基本实现了聊天系统中该有的功能
单独抽出来的聊天项目地址:
该模块位于项目中的 Layout
目录组件中,通过二次封装,将原有Lemon-IMUI
组件化,通过控制 element 模态框来达到展示效果
调用处:
<chat ref="chat" :chatDialogData="chatDialogData"></chat>
import { Chat } from './components'
export default {
name: 'layout',
components: {
Chat,
},
data() {
return {
chatDialogData: {
dialogVisible: true,
},
path: process.env.WS_API,
socket: '',
}
},
mounted() {
this.chatDialogData.dialogVisible = false
if (typeof WebSocket === 'undefined') {
alert('您的浏览器不支持socket')
} else {
// 实例化socket
this.socket = new WebSocket(this.path, [this.$store.getters.token])
this.$refs['chat'].init(this.socket)
}
},
}
</script>
该项目是基于 基于 VUE 2.0 开发出来的 IM 聊天组件,拥有丰富的自定义功能,任意搭配出不同风格的聊天界面,不依赖任何第三方 UI 组件库,可任意扩展聊天消息类型