lemon_chat_style

功能描述

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

依赖的插件

vue

快速使用

    <section class="aui-chat" id="chat_message_body" style="margin-top:10px;">
        <div class="aui-chat-header"><a id="user_msg_time">暂无消息</a></div>
        <div class="app-chat-data-list" id="chat_message_html">
            <div v-cloak v-for="(vo,index) in list">
                <div v-if="user_id != vo.user_id">
                    <div class="app-chat-data-list-left-msg">
                        <div class="app-chat-data-list-left-msg-l"><img :src="vo.head_portrait"></div>
                        <div class="app-chat-data-list-left-msg-r">
                            <div v-if="vo.msg_type == 'RC:TxtMsg'">
                                <i style="top:25px;"><img src="./image/msg_l.png"></i>
                                <p v-html="vo.user_msg"></p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:VcMsg'">
                                <i style="top:25px;"><img src="./image/msg_l.png"></i>
                              	<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">
                              		<img src="./image/yuyin_left.png">
                              		<a v-if="vo.read_state!='1'"></a>
                              		<b style="text-align: left;">{{vo.duration}}"</b>
                              	</p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
                             	<p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div v-else>
                    <div class="app-chat-data-list-right-msg">
                        <div class="app-chat-data-list-right-msg-l"><img :src="vo.head_portrait"></div>
                        <div class="app-chat-data-list-right-msg-r">
                        
                            <div v-if="vo.msg_type == 'RC:TxtMsg'">
                                <i style="top:25px;"><img src="./image/msg_r.png"></i>
                                <p v-html="vo.user_msg"></p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:VcMsg'">
                                <i style="top:25px;"><img src="./image/msg_r.png"></i>
                              	<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">
                              		<img src="./image/yuyin_right.png">
                              		<a v-if="vo.read_state!='1'"></a>
                              		<b style="text-align: right; right:0px;left:-24px;">{{vo.duration}}"</b>
                              	</p>
                            </div>
                            <div v-else-if="vo.msg_type == 'RC:ImgMsg'">
                             	<p class="image"><img @click="image_click" :image_src="vo.image_url" :src="vo.user_image"></p>
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
    
        </div>
    </section>

特别说明

此插件是需要vue框架辅助加载数据
是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24