<reed-chat-room> 组件

概述

<reed-chat-room>组件为独立聊天室页面。

基本用法

<reed-chat-room label="聊天室" :left-back="back" :right-back="back">
  <template #leftBackBtn>
  </template>
  <template #rightBackBtn>
  </template>
  <template v-slot:bubble="{ msg, roomInfo }">
  </template>
  <template v-slot:roomListContent="{ msg }">
  </template>
  <template #emojiBtn>
  </template>
  <template #sendBtn>
  </template>
  <template #moreBtn>
  </template>
</reed-chat-room>

属性说明

属性名	类型	默认值	说明
label	String	``	标题栏中显示的文字，默认与roomType关联
roomType	String	chat-room	组件类型，chat-room聊天室，customer-service客服用户端，customer-service-server客服服务端，默认聊天室
emojiUrl	String	当前url+/emoji	emoji表情配置地址
topSafeArea	Boolean	true	顶部安全区域，默认true开启
bottomSafeArea	Boolean	true	底部安全区域，默认true开启
leftBack	Function	-	聊天室首页左边返回按钮方法，配置了这个属性才会显示返回按钮
rightBack	Function	-	聊天室首页右边返回按钮方法，配置了这个属性才会显示返回按钮

插槽说明

组件通过插槽提供自定义操作按钮的图标或内容，支持以下插槽：

#leftBackBtn

• 作用：自定义左边「返回/关闭」按钮的图标或内容，配置了leftBack属性才会显示返回按钮

#righttBackBtn

• 作用：自定义右边「返回/关闭」按钮的图标或内容，配置了rightBack属性才会显示返回按钮

#emojiBtn

• 作用：自定义「emoji」按钮的图标或内容

#sendBtn

• 作用：自定义「发送」按钮的图标或内容

#moreBtn

• 作用：自定义「更多」按钮的图标或内容

#roomListContent

• 作用：扩展「聊天室列表」最新消息的内容，组件已适配消息类型为text、image的显示
• 插槽参数：

属性名	类型	默认值	说明
msg	Object	-	聊天室列表返回的json

• 示例：

  <template v-slot:roomListContent="{ msg }">
  
  </template>

#bubble

• 作用：扩展「聊天列表」的内容显示，组件已适配消息类型为text、image的显示

属性名	类型	默认值	说明
msg	Object	-	聊天信息的json
roomInfo	Object	-	当前聊天室信息

• 示例：

  <template v-slot:bubble="{ msg, roomInfo }">
  </template>