0.1.6 • Published 10 months ago
bis_chat_box v0.1.6
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} |