chat_box 组件

Vue2 组件

功能：

左侧自定义区域，右侧聊天框； 通过传入数组参数渲染聊天框对话情景； 在聊天框右侧有更多选项按钮，在输入框下方调出自定义界面； 左侧区域完全自定义，也可以取消该区域，只保留右侧聊天框； 可以更改界面主题和按钮样式。

用法：

通过 npm 下载包

npm install bis_chat_box

通过 Vue.use()安装组件

import bis_chat_box from "bis_chat_box"
Vue.use(bis_chat_box)

属性：

messageList 数组参数

messageList 是聊天数据数组，类型是一个对象数组，数组内的参数必须与下表匹配。

| 名称 | 类型 | 说明 | | -------- | -------------- | ----------------------------------------------------------------------- | | portrait | String | 头像图片路径 | | text | String | 聊天文本 | | location | "left"/"right" | 对话显示位置 | | img | Array | 数组内容为 String，是对话图片路径，数组长度建议小于等于 4，以免页面变形 |

ChatBox

整合自定义区域和聊天框区域。

参数

事件

| 名称 | 说明 | 回调参数 | | --------- | ---------------------------------------- | -------------------------------------- | | clickImg | 点击对话中的图片时触发 | {index:对话数组下标,imgIndex:图片下标} | | clickMsg | 点击对话（图片外）区域时触发 | {index:对话数组下标,event:MouseEvent} | | clickMore | 点击更多选项按钮时触发 | / | | sendMsg | 点击发送按钮，或在输入框位置按回车时触发 | 发送的信息内容 |

插槽

| 名称 | 说明 | | --------- | ------------------------ | | leftPanel | 左边自定义区域 | | more | 右边聊天框自定义设置区域 |

MessageBox 标签

聊天栏，支持单独使用。

参数

| 名称 | 是否必要 | 类型 | 默认值 | 说明 | | ---------------------- | -------- | ------- | ----------- | -------------------------------------------------------------- | | messageList | true | Array | / | 详见上一节 | | isIndependentComponent | false | Boolean | true | 是否单独使用该组件 | | theme | false | String | "lightblue" | 设置主题 background 样式，需要与 css background 的内容格式相同 | | btn | false | String | "palegreen" | 设置按钮 background 样式，格式同上 | | msgBox | false | String | "white" | 设置聊天框 background 样式，格式同上 | | moreFun | false | Boolean | true | 开启聊天框自定义选项功能 |

事件

| 名称 | 说明 | 回调参数 | | --------- | ---------------------------------------- | -------------------------------------- | | clickImg | 点击对话中的图片时触发 | {index:对话数组下标,imgIndex:图片下标} | | clickMsg | 点击对话（图片外）区域时触发 | {index:对话数组下标,event:MouseEvent} | | clickMore | 点击更多选项按钮时触发 | / | | sendMsg | 点击发送按钮，或在输入框位置按回车时触发 | 发送的信息内容 |

插槽

| 名称 | 说明 | | ---- | ------------------------ | | more | 右边聊天框自定义设置区域 |

SingleMessage 标签

单条对话标签

参数

| 名称 | 是否必要 | 类型 | 默认值 | 说明 | | -------- | -------- | ------------ | ------ | ------------ | | portrait | true | String | / | 头像图片路径 | | text | true | String | / | 文本 | | location | true | "left/right" | / | 对话显示位置 | | img | false | Array | / | 图片路径数组 | | index | true | Number | / | 对话序号 |

事件

| 名称 | 说明 | 回调参数 | | -------- | ---------------------------- | -------------------------------------- | | clickImg | 点击对话中的图片时触发 | {index:对话数组下标,imgIndex:图片下标} | | clickMsg | 点击对话（图片外）区域时触发 | {index:对话数组下标,event:MouseEvent} |