# chat组件界面
# JwChat-index
点击查看代码
<JwChat-index
ref="jwChat"
v-model="inputMsg"
:taleList="taleList"
:scrollType="scrollType"
:toolConfig="tool"
:placeholder="placeholder"
:config="config"
:winBarConfig="winBarConfig"
:showRightBox="showRightBox"
@enter="bindEnter"
@clickTalk="talkEvent"
>
<!-- <template slot="enter">
<div>自定义输入框</div>
</template> -->
<!-- <template slot="enterBtn">
<div>自定义按钮</div>
</template> -->
<!-- <template #downBtn="{unread}">
<div>
未读{{unread}}
</div>
</template> -->
<!-- <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>
<script>
export default {
data () {
return {
scrollType: 'noroll', // scroll noroll 俩种类型
placeholder: "欢迎使用JwChat...(最多输入30字)",
inputMsg: '',
taleList: [],
tool: {
callback: this.toolEvent
},
config: {
img: "image/cover.png",
name: "JwChat",
dept: "最简单、最便捷",
callback: this.bindCover,
historyConfig: {
show: false,
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,
},
],
maxlength: 30,
},
rightConfig: {
listTip: "当前在线",
notice:
"【公告】这是一款高度自由的聊天组件,基于AVue、Vue、Element-ui开发。点个赞再走吧 ",
filterTip: "好友过滤",
list: [
{
name: "JwChat",
img: "image/three.jpeg",
id: 1,
},
{
id: 2,
name: "JwChat",
img: "image/three.jpeg",
},
{
id: 3,
name: "JwChat",
img: "image/three.jpeg",
},
{
id: 4,
name: "留恋人间不羡仙",
img: "image/one.jpeg",
},
{
name: "只盼流星不盼雨",
img: "image/two.jpeg",
},
],
},
talk: [
"快捷回复1",
"快捷回复2",
"快捷回复3",
"快捷回复4",
"快捷回复5",
"快捷回复6",
],
quickConfig: {
nav: ["快捷回复", "超级回复"],
showAdd: true,
maxlength: 200,
showHeader: true,
showDeleteBtn: true,
},
showRightBox: true,
winBarConfig: {
active: "win01",
width: "180px",
listHeight: "60px",
list: [
{
id: "win00",
img: "image/cover.png",
name: "JwChat",
dept: "最简单、最便捷",
readNum: 1,
},
{
id: "win01",
img: "image/three.jpeg",
name: "阳光明媚爱万物",
dept: "沙拉黑油",
readNum: 12,
},
{
id: "win02",
img: "image/two.jpeg",
name: "只盼流星不盼雨",
dept: "最后说的话",
readNum: 12,
},
{
id: "win03",
img: "image/one.jpeg",
name: "留恋人间不羡仙",
dept: "这里可以放万物",
readNum: 0,
},
{
id: "win04",
img: "image/three.jpeg",
name: "阳光明媚爱万物",
dept: "官方客服",
},
],
callback: this.bindWinBar,
},
}
},
methods: {
/**
* @description: 点击加载更多的回调函数
* @param {*}
* @return {*}
*/
async 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: "image/three.jpeg",
};
});
let list = history.concat(this.taleList);
this.taleList = list;
console.log("加载历史", list, history);
// 加载完成后通知组件关闭加载动画
this.config.historyConfig.tip = "加载完成";
this.$nextTick(() => {
this.$refs.jwChat.finishPullDown();
});
},
bindEnter (e) {
console.log(e)
const msg = this.inputMsg
if (!msg) return;
const msgObj = {
"date": "2020/05/20 23:19:07",
"text": { "text": msg },
"mine": true,
"name": "JwChat",
"img": "../image/three.jpeg"
}
this.list.push(msgObj)
},
toolEvent (type, obj) {
console.log('tools', type, obj)
},
talkEvent (play) {
console.log(play)
},
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);
}
},
},
mounted () {
const img = 'https://www.baidu.com/img/flexible/logo/pc/result.png'
const list = [
{
"date": "2020/04/25 21:19:07",
"text": { "text": "起床不" },
"mine": false,
"name": "留恋人间不羡仙",
"img": "../image/one.jpeg"
},
{
"date": "2020/04/25 21:19:07",
"text": { "text": "<audio data-src='https://www.w3school.com.cn/i/horse.mp3'/>" },
"mine": false,
"name": "只盼流星不盼雨",
"img": "../image/two.jpeg"
},
{
"date": "2020/04/25 21:19:07",
"text": { "text": "<img data-src='"+img+"'/>" },
"mine": false,
"name": "只盼流星不盼雨",
"img": "../image/two.jpeg"
},
{
"date": "2020/04/25 21:19:07",
"text": { "text": "<img data-src='../image/three.jpeg'/>" },
"mine": false,
"name": "只盼流星不盼雨",
"img": "../image/two.jpeg"
},
{
"date": "2020/04/16 21:19:07",
"text": { "text": "<video data-src='https://www.w3school.com.cn/i/movie.mp4' controls='controls' />" },
"mine": true,
"name": "JwChat",
"img": "../image/three.jpeg"
},
{
"date": "2021/03/02 13:14:21",
"mine": false,
"name": "留恋人间不羡仙",
"img": "../image/one.jpeg",
"text": {
system: {
title: '在接入人工前,智能助手将为您首次应答。',
subtitle: '猜您想问:',
content: [
{
id: `system1`,
text: '组件如何使用'
},
{
id: `system2`,
text: '组件参数在哪里查看'
},
{
id: 'system',
text: '我可不可把组件用在商业'
}
]
}
}
},
{
"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": "../image/one.jpeg"
},
]
this.taleList = list
}
}
</script>
# 参数配置
# Attribute
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
v-model | 输入框中的文字 | String | - | "" |
taleList | 会话内容 | Array | - | [] |
toolConfig | 工具栏配置 | Object | - | {} |
width | JwChat界面框宽度 | string | - | 750px |
height | JwChat界面框高度 | string | - | 570px |
config | 聊天组件基础配置 | Object | - | {} |
scrollType | 滚动类型 | String | scroll (滚动到最新消息) | noroll (停留当期位置) |
showRightBox | 显示右边内容 | Boolean | false | true |
winBarConfig | 多窗口配置 | Object | - | {} |
placeholder | 输入框占位符 | string | - | '请输入内容...' |
# Methods
参数 | 说明 | 参数 |
---|---|---|
enter | 输入框点击就发送或者回车触发的事件 | 输入的原始数据 |
clickTalk | 点击聊天框列中的用户和昵称触发事件 | 当前对话数据 |
# Slot
name | 说明 |
---|---|
header | 头部自定义插槽 |
- | 右侧自定义插槽(不需要 name 属性) |
tools | 工具栏自定义插槽 |
enter | 舍弃组件输入框,用户自定义插槽 |
downBtn | 下拉按钮自定义插槽 |
enterBtn | 发送按钮自定义插槽 |
talkItem | 对话框自定义插槽 |
winBarBtn | 删除按钮自定义插槽 |
# config
说明
{
img: '../image/cover.png',
name: 'JwChat',
dept: '最简单、最便捷',
callback: bindCover (event) {
console.log('header', event)
},
historyConfig: {
tip: '滚动到顶时候显示的提示',
/**
* @description: 点击加载更多的回调函数
* @param {*}
* @return {*}
*/
callback: bindLoadHistory (done) {
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": "image/three.jpeg"
}
})
let list = history.concat(this.list)
this.list = list
// 加载完成后通知组件关闭加载动画
this.config.historyConfig.tip = "加载完成";
this.$nextTick(() => {
// 组件完成加载后需要需要告知组件 下列方法任选一种
// 1.直接调用 done
done()
// 2.直接使用组件方法
// this.$refs.jwChat.finishPullDown();
});
}
},
quickList: [
{text: '这里是jwchat,您想了解什么问题。'},
{text: 'jwchat是最好的聊天组件'},
{text: '谁将烟焚散,散了纵横的牵绊;听弦断,断那三千痴缠。'},
{text: '长夏逝去。山野间的初秋悄然涉足。'},
{text: '江南风骨,天水成碧,天教心愿与身违。'},
{text: '总在不经意的年生。回首彼岸。纵然发现光景绵长。'},
{text: '外面的烟花奋力的燃着,屋里的人激情的说着情话'},
{text: '假如你是云,我就是雨,一生相伴,风风雨雨;'},
{text: '即使泪水在眼中打转,我依旧可以笑的很美,这是你学不来的坚强。'},
{text: ' 因为不知来生来世会不会遇到你,所以今生今世我会加倍爱你。'},
],
maxlength: 30,
}
# toolConfig
说明
具体请查看 chat
组件介绍
# winBarConfig
说明
{
active: 'win00', // 当前选中
width: '160px', // 宽度大小
listHeight: '60px', // 单个高度
list: [ {
id: 'win00',
img: '/image/cover.png',
name: 'JwChat',
dept: '最简单、最便捷'
},
{
id: 'win01',
img: '/image/three.jpeg',
name: '阳光明媚爱万物',
dept: '沙拉黑油'
},
{
id: 'win02',
img: '/image/two.jpeg',
name: '只盼流星不盼雨',
dept: '最后说的话'
},
{
id: 'win03',
img: '/image/one.jpeg',
name: '留恋人间不羡仙',
dept: '这里可以放万物'
},
{
id: 'win04',
img: '/image/three.jpeg',
name: '阳光明媚爱万物',
dept: '官方客服'
}],
callback: (play = {}) {
const {type, data={}} = play
console.log(data);
if(type==='winBar'){
const { id, dept, name, img } = data
this.winBarConfig.active = id
}
}
}