实现前言:
这是一个基于element的聊天框插件,可扩展性还是很强的。
JwChat:官网入口 gitee地址:入口
大佬图片与实现效果:
实现步骤:
1、安装:
cnpm i jwchat -S
2、配置使用:
//element 必须
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
//聊天室-基于element
import Chat from 'jwchat';
Vue.use(Chat)
3、页面调用:
<JwChat-index
:config="config"
:taleList="list"
@enter="bindEnter"
v-model="inputMsg"
:showRightBox='true'
scrollType="scroll"
:winBarConfig="winBarConfig"
:quickList="config.quickList"
@clickTalk="talkEvent"
>
<!-- :toolConfig="tool" -->
<JwChat-rightbox class="rightSlot" :config="rightConfig" @click="rightClick" />
<!--<JwChat-talk class="rightSlot" :Talelist="talk" :config="quickConfig" @event="bindTalk" />-->
<template slot="tools">
<div style="width:20rem;text-align:right;" @click="toolEvent(12)">
<JwChat-icon type="icon-lishi" title="自定义"/>
</div>
</template>
</JwChat-index>
调用源码:
<template>
<div class="jwchat__body wrapper">
<JwChat-index
:config="config"
:taleList="list"
@enter="bindEnter"
v-model="inputMsg"
:showRightBox='true'
scrollType="scroll"
:winBarConfig="winBarConfig"
:quickList="config.quickList"
@clickTalk="talkEvent"
>
<!-- :toolConfig="tool" -->
<JwChat-rightbox class="rightSlot" :config="rightConfig" @click="rightClick" />
<!--<JwChat-talk class="rightSlot" :Talelist="talk" :config="quickConfig" @event="bindTalk" />-->
<template slot="tools">
<div style="width:20rem;text-align:right;" @click="toolEvent(12)">
<JwChat-icon type="icon-lishi" title="自定义"/>
</div>
</template>
</JwChat-index>
</div>
</template>
<script>
const img = 'https://www.baidu.com/img/flexible/logo/pc/result.png'
const listData = [
{
"date": "2020/04/25 21:19:07",
"text": {
"text": "<i class='el-icon-document-checked' style='font-size:2rem;'/>",
"subLink":{
"text": "a.txt",
"prop": {
underline: false
}
},
},
"mine": false,
"name": "留恋人间不羡仙",
"img": "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg"
},
{
"date": "",
"text": { "text": "起床不" },
"mine": false,
"name": "留恋人间不羡仙",
"img": "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg"
},
{
"text": "2020/04/25 21:19:07",
"type": 'tip'
},
{
"date": "2020/04/25 21:19:07",
"text": { "text": "<audio src='https://www.w3school.com.cn/i/horse.mp3'/>" },
"mine": false,
"name": "只盼流星不盼雨",
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
},
{
"date": "2020/04/25 21:19:07",
"text": { "text": "<img src='"+img+"'/>" },
"mine": false,
"name": "只盼流星不盼雨",
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
},
{
"date": "2020/04/16 21:19:07",
"text": { "text": "<video src='https://www.w3school.com.cn/i/movie.mp4' controls='controls' />" },
"mine": true,
"name": "JwChat",
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
},{
"date": "2021/03/02 13:14:21",
"mine": false,
"name": "留恋人间不羡仙",
"img": "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg",
"text": {
system: {
title: '在接入人工前,智能助手将为您首次应答。',
subtitle: '猜您想问:',
content: [
{
id: `system1`,
text: '组件如何使用'
},
{
id: `system2`,
text: '组件参数在哪里查看'
},
{
id: 'system',
text: '我可不可把组件用在商业'
}
]
}
}
}
]
function getListArr(size) {
const listSize = listData.length
if(!size){
size = listSize
}
let result = []
for (let i = 0; i < size; i++) {
const item = listData[Math.random()*listSize>>0]
item.id = Math.random().toString(16).substr(-6)
result.push(item)
}
return result
}
export default {
components: { },
data () {
return {
inputMsg: '',
list: [],
tool: {
// show: ['file', 'history', 'img', ['文件1', '', '美图']],
// showEmoji: false,
callback: this.toolEvent
},
rightConfig: {
listTip: '当前在线',
// notice: '【公告】这是一款高度自由的聊天组件,基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
list: [
{
name: 'JwChat',
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg",
id:1,
},
{
id:2,
name: 'JwChat',
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
},
{
id:3,
name: 'JwChat',
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
},
{
id:4,
name: '留恋人间不羡仙',
"img": "https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg"
},
{
name: '只盼流星不盼雨',
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
}
]
},
rightConfig2:{
listTip: '当前在线',
// notice: '【公告】这是一款高度自由的聊天组件,基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
list: [
{
name: 'JwChat',
"img": "https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg"
},
{
name: '留恋人间不羡仙',
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
},
{
name: '只盼流星不盼雨',
"img": "https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg"
}
]
},
quickConfig: {
nav: ['快捷回复', '超级回复'],
showAdd: true,
maxlength: 200,
showHeader: true,
showDeleteBtn: true,
},
talk: [
'快捷回复1',
'快捷回复2',
'快捷回复3',
'快捷回复4',
'快捷回复5',
'快捷回复6',
],
config: {
img: 'https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg',
name: 'JwChat',
dept: '最简单、最便捷',
callback: this.bindCover,
historyConfig:{
show: true,
tip: '加载更多',
callback: this.bindLoadHistory,
},
quickList: [
{text: '这里是jwchat,您想了解什么问题。', id:3},
{text: 'jwchat是最好的聊天组件', id:4},
{text: '谁将烟焚散,散了纵横的牵绊;听弦断,断那三千痴缠。', id:5},
{text: '长夏逝去。山野间的初秋悄然涉足。', id:6},
{text: '江南风骨,天水成碧,天教心愿与身违。', id:7},
{text: '总在不经意的年生。回首彼岸。纵然发现光景绵长。', id:8},
{text: '外面的烟花奋力的燃着,屋里的人激情的说着情话', id:10},
{text: '假如你是云,我就是雨,一生相伴,风风雨雨;', id:11},
{text: '即使泪水在眼中打转,我依旧可以笑的很美,这是你学不来的坚强。', id:12},
{text: ' 因为不知来生来世会不会遇到你,所以今生今世我会加倍爱你。', id:13},
]
},
winBarConfig: {
active: 'win01',
width: '160px',
listHeight: '60px',
list: [ {
id: 'win00',
img: 'https://img1.baidu.com/it/u=2109725846,3376113789&fm=26&fmt=auto&gp=0.jpg',
name: 'JwChat',
dept: '最简单、最便捷',
readNum: 1
},
{
id: 'win01',
img: 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg',
name: '阳光明媚爱万物',
dept: '沙拉黑油',
readNum: 12
},
{
id: 'win02',
img: 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg',
name: '只盼流星不盼雨',
dept: '最后说的话',
readNum: 12
},
{
id: 'win03',
img: 'https://img0.baidu.com/it/u=3066115177,3339701526&fm=26&fmt=auto&gp=0.jpg',
name: '留恋人间不羡仙',
dept: '这里可以放万物',
readNum: 0
},
{
id: 'win04',
img: 'https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg',
name: '阳光明媚爱万物',
dept: '官方客服'
}],
callback: this.bindWinBar,
}
}
},
methods: {
/**
* @description: 点击加载更多的回调函数
* @param {*}
* @return {*}
*/
bindLoadHistory () {
const history = new Array(3).fill().map((i, j) => {
return {
"date": "2020/05/20 23:19:07",
"text": { "text": j + new Date() },
"mine": false,
"name": "JwChat",
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
}
})
let list = history.concat(this.list)
this.list = list
console.log('加载历史', list, history)
},
talkEvent (play) {
console.log(play)
alert(1)
},
bindEnter (str) {
const msg = this.inputMsg
console.log(msg, str);
if (!msg) return;
const msgObj = {
"date": "2020/05/20 23:19:07",
"text": { "text": msg },
"mine": true,
"name": "JwChat",
"img": "https://img1.baidu.com/it/u=31094377,222380373&fm=26&fmt=auto&gp=0.jpg"
}
this.list.push(msgObj)
},
/**
* @description:
* @param {*} type 当前点击的按钮
* @param {*} plyload 附加文件或者需要处理的数据
* @return {*}
*/
toolEvent (type, plyload) {
console.log('tools', type, plyload)
},
bindCover (event) {
console.log('header', event)
},
rightClick (type) {
console.log('rigth', type)
},
bindTalk (play) {
console.log('talk', play)
const { key, value } = play
if(key === 'navIndex')
this.talk = [1,1,1,1,1,1,1,1].reduce((p)=>{
p.push('随机修改颜色 #'+Math.random().toString(16).substr(-6))
return p
},[])
if(key === 'select') {
this.inputMsg = value
this.bindEnter()
}
if(key === 'delIndex') {
this.talk.splice(value,1)
}
},
bindWinBar (play = {}) {
const {type, data={}} = play
console.log(play);
if(type==='winBar'){
const { id, dept, name, img } = data
this.config = {...this.config, id, dept, name, img}
this.winBarConfig.active = id
if(id==='win00'){
this.list = getListArr()
} else
this.list = getListArr(Math.random()*4>>0)
}
if(type==='winBtn'){
const { target: {id } = {} } = data
const {list} = this.winBarConfig
this.winBarConfig.list =list.reduce((p,i)=>{
if(id!=i.id)
p.push( i )
return p
},[])
}
}
},
mounted () {
this.list = getListArr()
}
}
</script>
<style scoped>
.rightSlot {
width: 100%;
height: 100%;
overflow: hidden;
flex-direction: column;
}
</style>
<style>
.active {
color: red;
}
.jwchat__body {
height: 100vh;
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>