聊天
<p>[TOC]</p>
<h4>安装</h4>
<p>七巧板基于 VUE （2.5）， Webpack (3.0) 请确保已具备较新的 node 环境。</p>
<h4>聊天组件基础使用</h4>
<p>当前用法中所有参数，均为必填参数，只支持单一的发送文本功能</p>
<pre><code class="language-html"><template>
<chat
:roomId="roomInfo.roomeId"
:avatar="avatar"
:nickname="nickname"
:roleName="roomInfo.roleName"
:third_party_user_id="roomInfo.third_party_user_id"
:paas_access_token="roomInfo.paas_access_token"
:channel_id="roomInfo.channel_id"
:app_id="roomInfo.app_id"
:allBanned="allBanned"
:isBanned="isBanned"
:showEmoji="showEmoji"
></chat>
<script>
export default {
data () {
return {
roomInfo: {
roomeId: "lss_xxxxx", // 当前活动房间id
roleName: 1, // 角色名称 1主持人2观众3助理4嘉宾
third_party_user_id: 1234, // 当前房间用户id
paas_access_token: 'access:XXXX', // pass 身份标识
channel_id: 'ch_xxxxx', // 频道Id
app_id: 'xxxxxx', // 应用 ID
},
avatar: 'xxxxx.jpg', // 用户头像
nickname: '张XX' // 用户姓名,
roomStatus:{
allBanned: false, // 当前房间是否开启了全体禁言 true开启 false未开启
isBanned: false // 当前用户在当前房间是否被单独禁言 true是 false否
},
roleNameText:{ // 聊天区域右侧类型显示，不传入则不显示！！！！
text: '' // 显示名称右侧的标签，可以任意输入，不输入则不显示
type: 'host' // 可以选用主持人host，嘉宾guest，助理assistant，这三个有默认样式，也可传入其他类型用于特殊class，应用层可自己修改显示样式
},
showEmoji: true // 是否添加表情入口（wap独有）
}
}
</script>
</template></code></pre>
<h4>注意事项</h4>
<p><strong>wap</strong></p>
<ol>
<li>在 tab 切换后，如果目标 tab 是聊天组件区域，需要调用 this.$refs.vhChat.refresh()</li>
<li>在某些操作后，如会造成聊天组件页面卡死，无法滚动等情况发生，也需要调用一下 this.$refs.vhChat.refresh()，例如问卷提交成功后</li>
<li>在手机端 mounted 中，需要加入 input 监听事件，解决 iphone 软键盘弹出造成的底部留白兼容性问题</li>
</ol>
<pre><code class="language-javascript"><template>
<script>
export default {
mounted () {
this.keyboardEvents()
}methods: {
keyboardEvents() {
let myFunction;
document.body.addEventListener('focusin', () => { // 软键盘弹起事件
clearTimeout(myFunction)
})
document.body.addEventListener('focusout', () => { // 软键盘关闭事件
clearTimeout(myFunction)
myFunction = setTimeout(function() {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
}) // =======当键盘收起的时候让页面回到原始位置
}, 200)
})
}
}
}
</script>
</template></code></pre>
<h4>props</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">参数</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">类型</th>
<th style="text-align: left;">可选值</th>
<th style="text-align: left;">默认值</th>
<th style="text-align: left;">必填</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">playerType</td>
<td style="text-align: left;">直播类型，vod 为回放，live 为直播</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">roomId</td>
<td style="text-align: left;">房间 Id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-1</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">avatar</td>
<td style="text-align: left;">用户信息，头像地址</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">nickname</td>
<td style="text-align: left;">用户信息，昵称</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">roleName</td>
<td style="text-align: left;">角色名称</td>
<td style="text-align: left;">Number, String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">vssToken</td>
<td style="text-align: left;">图片上传需要的 vssToken</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">当有上传图片功能时，必传</td>
</tr>
<tr>
<td style="text-align: left;">third_party_user_id</td>
<td style="text-align: left;">用户 Id</td>
<td style="text-align: left;">Number, String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">paas_access_token</td>
<td style="text-align: left;">access_token</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">channel_id</td>
<td style="text-align: left;">频道 Id</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">app_id</td>
<td style="text-align: left;">应用 Id</td>
<td style="text-align: left;">Number, String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">chatFilterData</td>
<td style="text-align: left;">聊天过滤的数组</td>
<td style="text-align: left;">Array</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">plugin</td>
<td style="text-align: left;">插件</td>
<td style="text-align: left;">Object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">{image: false // 是否开启图片上传,emoji:</td>
<td style="text-align: left;">false // 是否开启表情,audit: false // 是否开启过滤}</td>
<td>否</td>
</tr>
<tr>
<td style="text-align: left;">isEmbed</td>
<td style="text-align: left;">是否为隐身参会（开启时初始化 sdk，不记并发）</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">allBanned</td>
<td style="text-align: left;">是否全体禁言</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">isBanned</td>
<td style="text-align: left;">是否被禁言</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">是</td>
</tr>
<tr>
<td style="text-align: left;">isShowLoginBox</td>
<td style="text-align: left;">是否显示登录框，及当前是否需要登录后才可发言，需要应用层判断是否开启登录验证和当前是否登录后给出结果</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">questionnaireNeedLogin</td>
<td style="text-align: left;">问卷是否需要登录才可以填写</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">false</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">faceArrInit</td>
<td style="text-align: left;">聊天表情自定义</td>
<td style="text-align: left;">Object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">avatarType</td>
<td style="text-align: left;">聊天头像显示类型 img 显示图片（未上传显示默认图）/nickName 显示昵称首字母</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">nickName;img</td>
<td style="text-align: left;">img</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">placeholder</td>
<td style="text-align: left;">聊天输入框添加默认提示配置</td>
<td style="text-align: left;">String</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">emojiUrlInit</td>
<td style="text-align: left;">聊天表情存放路径</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">UVBase</td>
<td style="text-align: left;">定义基准 UV，以万为单位</td>
<td style="text-align: left;">number</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">1</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">gapTimeBase</td>
<td style="text-align: left;">定义基准 UV 的发送消息的时间间隔，以秒为单位</td>
<td style="text-align: left;">number</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">10</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">roleNameText</td>
<td style="text-align: left;">聊天区域右侧类型显示，（注意）不传入则不显示</td>
<td style="text-align: left;">Object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">maxlength</td>
<td style="text-align: left;">输入框最大长度，默认140</td>
<td style="text-align: left;">Number</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">140</td>
<td style="text-align: left;"></td>
</tr>
<tr>
<td style="text-align: left;">roleNameText</td>
<td style="text-align: left;">聊天区域右侧类型显示，（注意）不传入则不显示</td>
<td style="text-align: left;">Object</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">showMsgBtn</td>
<td style="text-align: left;">是否显示互动消息“点击查看”、“点击填写”等按钮 true 显示/false 不显示</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">true /false</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
<tr>
<td style="text-align: left;">showEmoji</td>
<td style="text-align: left;">是否显示表情入口 true为显示，false为隐藏(仅wap有效)</td>
<td style="text-align: left;">Boolean</td>
<td style="text-align: left;">true /false</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">否</td>
</tr>
</tbody>
</table>
<h4>events</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">事件名</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">回调参数</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">component_send_gap_time</td>
<td style="text-align: left;">发送消息的时间间隔</td>
<td style="text-align: left;">number,距离下一次可发送消息还剩多少s</td>
</tr>
<tr>
<td style="text-align: left;">receiveChatMsg</td>
<td style="text-align: left;">收到非自己发送的聊天消息抛出的事件名，主要用于观看端红点显示</td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<h4>eventBus</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">name</th>
<th style="text-align: left;">说明</th>
<th style="text-align: left;">回调参数的属性</th>
<th style="text-align: left;">回调参数说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">component_changePage</td>
<td style="text-align: left;">聊天审核列表翻页消息</td>
<td style="text-align: left;">当前页码数</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_chatFilterUrl</td>
<td style="text-align: left;">发送消息到助手</td>
<td style="text-align: left;">过滤地址</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_emojiInput</td>
<td style="text-align: left;">点击选择聊天表情</td>
<td style="text-align: left;">表情名称</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_chatUpdata</td>
<td style="text-align: left;">聊天列表更新消息</td>
<td style="text-align: left;">-</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_chatSDK_ready</td>
<td style="text-align: left;">聊天 SDK 实例化成功</td>
<td style="text-align: left;">true</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_check_lottery</td>
<td style="text-align: left;">子组件查看抽奖</td>
<td style="text-align: left;">第一个参数是聊天消息返回的参数，第二个参数是当前用户的 id</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_check_questionnaire</td>
<td style="text-align: left;">子组件查看问卷</td>
<td style="text-align: left;">问卷 id</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">previewImg</td>
<td style="text-align: left;">预览聊天中发送的图片</td>
<td style="text-align: left;">第一个参数图片当前的页数，第二个参数图片的张数</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_repeat_login_out</td>
<td style="text-align: left;">单点登录，如果有第二个相同账号登录会抛出该事件</td>
<td style="text-align: left;">根据 msg.data.third_uid 同当前账号 id 对比，如果一致，踢出当前账号</td>
<td style="text-align: left;">-</td>
</tr>
<tr>
<td style="text-align: left;">component_chat_msg</td>
<td style="text-align: left;">广播聊天消息中 msg.data.type 为 text 和 image 的消息</td>
<td style="text-align: left;"></td>
<td style="text-align: left;">-</td>
</tr>
</tbody>
</table>
<h4>方法</h4>
<ul>
<li>
<p>refresh()
说明：当聊天区域重绘，可解决页面 tab 切换或其他操作导致聊天区域卡死问题</p>
</li>
<li>
<p>openAuthChat()
说明：可开启聊天过滤页面</p>
</li>
<li>toFirstPage()
说明：调用该方法，无所当前是在聊天记录哪一页，或者滚动条在哪个位置，都会拉取最新的聊天记录并且将最新的消息更新到页面最下方</li>
</ul>
<h4>聊天组件 v1.5 版本升级，优化 class 名称</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">原CLass</th>
<th style="text-align: left;">修改后Class</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">chat-content</td>
<td style="text-align: left;">vh-chat-com__content</td>
</tr>
<tr>
<td style="text-align: left;">chat-content-scroll</td>
<td style="text-align: left;">vh-chat-com__content-scroll</td>
</tr>
<tr>
<td style="text-align: left;">chat-bottom</td>
<td style="text-align: left;">vh-chat-com__bottom</td>
</tr>
<tr>
<td style="text-align: left;">chat-img-box</td>
<td style="text-align: left;">vh-chat-com__img-box</td>
</tr>
<tr>
<td style="text-align: left;">chat-img</td>
<td style="text-align: left;">vh-chat-com__img</td>
</tr>
<tr>
<td style="text-align: left;">img-close</td>
<td style="text-align: left;">vh-chat-com__img-close</td>
</tr>
<tr>
<td style="text-align: left;">emoji-wrapper</td>
<td style="text-align: left;">vh-chat-com__emoji-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">chat-control-wrap</td>
<td style="text-align: left;">vh-chat-com__control-wrap</td>
</tr>
<tr>
<td style="text-align: left;">avatar-uploader</td>
<td style="text-align: left;">vh-chat-com__avatar-uploader</td>
</tr>
<tr>
<td style="text-align: left;">authchat-box</td>
<td style="text-align: left;">vh-chat-com__authchat-box</td>
</tr>
<tr>
<td style="text-align: left;">openAuthChat</td>
<td style="text-align: left;">vh-chat-com__open-auth-chat</td>
</tr>
<tr>
<td style="text-align: left;">chat-input-wrap</td>
<td style="text-align: left;">vh-chat-com__input-wrap</td>
</tr>
<tr>
<td style="text-align: left;">input-placeholder</td>
<td style="text-align: left;">vh-chat-com__input-placeholder</td>
</tr>
<tr>
<td style="text-align: left;">chat-input-login</td>
<td style="text-align: left;">vh-chat-com__input-login</td>
</tr>
<tr>
<td style="text-align: left;">vhall-chat-slide-wrapper</td>
<td style="text-align: left;">vh-chat-com__slide-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">slide-group</td>
<td style="text-align: left;">vh-chat-com__slide-group</td>
</tr>
<tr>
<td style="text-align: left;">slide</td>
<td style="text-align: left;">vh-chat-com__slide</td>
</tr>
<tr>
<td style="text-align: left;">slide-control</td>
<td style="text-align: left;">vh-chat-com__slide-control</td>
</tr>
<tr>
<td style="text-align: left;">slide-close</td>
<td style="text-align: left;">vh-chat-com__slide-close</td>
</tr>
<tr>
<td style="text-align: left;">msg-item-wrapper</td>
<td style="text-align: left;">vh-chat-com__msg-item-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">msg-showtime</td>
<td style="text-align: left;">vh-chat-com__msg-showtime</td>
</tr>
<tr>
<td style="text-align: left;">msg-item</td>
<td style="text-align: left;">vh-chat-com__msg-item</td>
</tr>
<tr>
<td style="text-align: left;">msg-redpacket</td>
<td style="text-align: left;">vh-chat-com__msg-redpacket</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-top</td>
<td style="text-align: left;">vh-chat-com__redpacket-top</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-text-wrapper</td>
<td style="text-align: left;">vh-chat-com__redpacket-text-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-text</td>
<td style="text-align: left;">vh-chat-com__redpacket-text</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-text-status</td>
<td style="text-align: left;">vh-chat-com__redpacket-text-status</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-bottom</td>
<td style="text-align: left;">vh-chat-com__redpacket-bottom</td>
</tr>
<tr>
<td style="text-align: left;">msg-reward</td>
<td style="text-align: left;">vh-chat-com__msg-reward</td>
</tr>
<tr>
<td style="text-align: left;">ctop</td>
<td style="text-align: left;">vh-chat-com__ctop</td>
</tr>
<tr>
<td style="text-align: left;">hongbao</td>
<td style="text-align: left;">vh-chat-com__hongbao</td>
</tr>
<tr>
<td style="text-align: left;">note</td>
<td style="text-align: left;">vh-chat-com__note</td>
</tr>
<tr>
<td style="text-align: left;">avatar-wrap</td>
<td style="text-align: left;">vh-chat-com__avatar-wrap</td>
</tr>
<tr>
<td style="text-align: left;">chat-avatar</td>
<td style="text-align: left;">vh-chat-com__chat-avatar</td>
</tr>
<tr>
<td style="text-align: left;">chat-phone</td>
<td style="text-align: left;">vh-chat-com__chat-phone</td>
</tr>
<tr>
<td style="text-align: left;">msg-content</td>
<td style="text-align: left;">vh-chat-com__msg-content</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_name</td>
<td style="text-align: left;">vh-chat-com__msg-content-name</td>
</tr>
<tr>
<td style="text-align: left;">nickname</td>
<td style="text-align: left;">vh-chat-com__nick-name</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_body</td>
<td style="text-align: left;">vh-chat-com__msg-content-body</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_chat-img-wrapper</td>
<td style="text-align: left;">vh-chat-com__msg-content-chat-img-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_chat-img</td>
<td style="text-align: left;">vh-chat-com__msg-content-chat-img</td>
</tr>
<tr>
<td style="text-align: left;">lottery-check</td>
<td style="text-align: left;">vh-chat-com__lottery-check</td>
</tr>
<tr>
<td style="text-align: left;">vhall-chat-user-control_bg</td>
<td style="text-align: left;">vh-chat-com__user-control-bg</td>
</tr>
<tr>
<td style="text-align: left;">vhall-chat-user-control</td>
<td style="text-align: left;">vh-chat-com__user-control</td>
</tr>
<tr>
<td style="text-align: left;">setspeak</td>
<td style="text-align: left;">vh-chat-com__setspeak</td>
</tr>
<tr>
<td style="text-align: left;">setkick</td>
<td style="text-align: left;">vh-chat-com__setkick</td>
</tr>
<tr>
<td style="text-align: left;">chat__emoji-tab</td>
<td style="text-align: left;">vh-chat-com__emoji-tab</td>
</tr>
<tr>
<td style="text-align: left;">chat-filter</td>
<td style="text-align: left;">vh-chat-com__filter</td>
</tr>
<tr>
<td style="text-align: left;">chat-filter-btn</td>
<td style="text-align: left;">vh-chat-com__filter-btn</td>
</tr>
</tbody>
</table>
<h4>聊天 wap 组件 v1.2 版本升级，优化 class 名称</h4>
<table>
<thead>
<tr>
<th style="text-align: left;">原CLass</th>
<th style="text-align: left;">修改后CLass</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">chat</td>
<td style="text-align: left;">vh-chat</td>
</tr>
<tr>
<td style="text-align: left;">chat-content</td>
<td style="text-align: left;">vh-chat__content</td>
</tr>
<tr>
<td style="text-align: left;">newMsg</td>
<td style="text-align: left;">vh-chat__new-msg</td>
</tr>
<tr>
<td style="text-align: left;">send-msg-wrapper</td>
<td style="text-align: left;">vh-chat__send-msg-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">send-msg</td>
<td style="text-align: left;">vh-chat__send-msg</td>
</tr>
<tr>
<td style="text-align: left;">need-input</td>
<td style="text-align: left;">vh-chat__need-input</td>
</tr>
<tr>
<td style="text-align: left;">input-wrapper</td>
<td style="text-align: left;">vh-chat__input-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">login-btn</td>
<td style="text-align: left;">vh-chat__login-btn</td>
</tr>
<tr>
<td style="text-align: left;">msg-item-wrapper</td>
<td style="text-align: left;">vh-chat__msg-item-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">msg-item</td>
<td style="text-align: left;">vh-chat__msg-item</td>
</tr>
<tr>
<td style="text-align: left;">interact-msg</td>
<td style="text-align: left;">vh-chat__interact-msg</td>
</tr>
<tr>
<td style="text-align: left;">msg-redpacket</td>
<td style="text-align: left;">vh-chat__msg-redpacket</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-top</td>
<td style="text-align: left;">vh-chat__redpacket-top</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-icon</td>
<td style="text-align: left;">vh-chat__redpacket-icon</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-text-wrapper</td>
<td style="text-align: left;">vh-chat__redpacket-text-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-text</td>
<td style="text-align: left;">vh-chat__redpacket-text</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-text-status</td>
<td style="text-align: left;">vh-chat__redpacket-text-status</td>
</tr>
<tr>
<td style="text-align: left;">redpacket-bottom</td>
<td style="text-align: left;">vh-chat__redpacket-bottom</td>
</tr>
<tr>
<td style="text-align: left;">highlight</td>
<td style="text-align: left;">vh-chat__high-light</td>
</tr>
<tr>
<td style="text-align: left;">reward-text</td>
<td style="text-align: left;">vh-chat__reward-text</td>
</tr>
<tr>
<td style="text-align: left;">msg-showtime</td>
<td style="text-align: left;">vh-chat__msg-showtime</td>
</tr>
<tr>
<td style="text-align: left;">avatar-wrap</td>
<td style="text-align: left;">vh-chat__avatar-wrap</td>
</tr>
<tr>
<td style="text-align: left;">chat-avatar</td>
<td style="text-align: left;">vh-chat__chat-avatar</td>
</tr>
<tr>
<td style="text-align: left;">msg-content</td>
<td style="text-align: left;">vh-chat__msg-content</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_name</td>
<td style="text-align: left;">vh-chat__msg-content-name</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_body_pre</td>
<td style="text-align: left;">vh-chat__msg-content-body-pre</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_body</td>
<td style="text-align: left;">vh-chat__msg-content-body</td>
</tr>
<tr>
<td style="text-align: left;">jian-left</td>
<td style="text-align: left;">vh-chat__jian-left</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_chat-img-wrapper</td>
<td style="text-align: left;">vh-chat__chat-img-wrapper</td>
</tr>
<tr>
<td style="text-align: left;">msg-content_chat-img</td>
<td style="text-align: left;">vh-chat__chat-img</td>
</tr>
</tbody>
</table>