lemon_chat_style

功能描述

实用纯html5聊天模板，方便开发者快速布局聊天界面，配合官方的聊天组件，有效的提升开发速度

依赖的模块

  1. vue

快速使用

  1.     <section class="aui-chat" id="chat_message_body" style="margin-top:10px;">
  2.         <div class="aui-chat-header"><a id="user_msg_time">暂无消息</a></div>
  3.         <div class="app-chat-data-list" id="chat_message_html">
  4.             <div v-cloak v-for="(vo,index) in list">
  5.                 <div v-if="user_id != vo.user_id">
  6.                     <div class="app-chat-data-list-left-msg">
  7.                         <div class="app-chat-data-list-left-msg-l"><img :src="vo.head_portrait"></div>
  8.                         <div class="app-chat-data-list-left-msg-r">
  9.                             <div v-if="vo.msg_type == 'RC:TxtMsg'">
  10.                                 <i style="top:25px;"><img src="./image/msg_l.png"></i>
  11.                                 <p v-html="vo.user_msg"></p>
  12.                             </div>
  13.                             <div v-else-if="vo.msg_type == 'RC:VcMsg'">
  14.                                 <i style="top:25px;"><img src="./image/msg_l.png"></i>
  15.                                   <p class="yuyin yuyin_left" @click="video_click" v-duration="vo.duration" :video_src="vo.user_video" :message_id="vo.message_id" video_type="left">
  16.                                       <img src="./image/yuyin_left.png">
  17.                                       <a v-if="vo.read_state!='1'"></a>
  18.                                       <b style="text-align: left;">{{vo.duration}}"</b>
  19.                                   </p>
  20.                             </div>
  21.                             <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
  22.                                  <p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
  23.                             </div>
  25.                         </div>
  26.                     </div>
  27.                 </div>
  28.                 <div v-else>
  29.                     <div class="app-chat-data-list-right-msg">
  30.                         <div class="app-chat-data-list-right-msg-l"><img :src="vo.head_portrait"></div>
  31.                         <div class="app-chat-data-list-right-msg-r">
  33.                             <div v-if="vo.msg_type == 'RC:TxtMsg'">
  34.                                 <i style="top:25px;"><img src="./image/msg_r.png"></i>
  35.                                 <p v-html="vo.user_msg"></p>
  36.                             </div>
  37.                             <div v-else-if="vo.msg_type == 'RC:VcMsg'">
  38.                                 <i style="top:25px;"><img src="./image/msg_r.png"></i>
  39.                                   <p class="yuyin yuyin_right" @click="video_click" v-duration="vo.duration" :video_src="vo.user_video" :message_id="vo.message_id" video_type="right">
  40.                                       <img src="./image/yuyin_right.png">
  41.                                       <a v-if="vo.read_state!='1'"></a>
  42.                                       <b style="text-align: right; right:0px;left:-24px;">{{vo.duration}}"</b>
  43.                                   </p>
  44.                             </div>
  45.                             <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
  46.                                  <p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
  47.                             </div>
  49.                         </div>
  50.                     </div>
  51.                 </div>
  52.             </div>
  54.         </div>
  55.     </section>

特别说明

  1. 此模块是需要vue框架辅助加载数据