<reed-chat-room> 组件

概述

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

基本用法

<reed-chat-room label="聊天室" :back="back">
  <template #backBtn>
  </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	消息	标题栏中显示的文字
emojiUrl	String	当前url+/emoji	emoji表情配置地址
back	Function	-	聊天室首页返回按钮方法，配置了这个属性才会显示返回按钮

插槽说明

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

#backBtn

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

#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>