waillyer的博客

安装$ npm install vue-aplayer --save文档：vue-aplayer注册//main.js import vueAplayer from 'vue-aplayer' Vue.use(vueAplayer)引入组件 <div style="width: 100%"> <aplayer v-if="showPlayer" ref="videoPlayRef" :music="videoPlay" :autop

视频预览用的是html5 video 标签点击视频，把地址赋值到src中，同时显示盒子即可<div class="msgVideoShowBox" v-if="showVideoViewer"><div class="msgVideoShowContainer"> <div class="shoutDownMsgVideo" @click="showVideoViewer=false">x</div> <video class..

效果1、右击弹出列表，同时保存消息id2、选择转发成员，转发即可注意：转发对象可为当前聊天对象，转发成功后需判断是否是存在转发当前聊天，是的话把消息数据显示转发右击列表 <Dropdown style="z-index:9999999!important;" ref="contentMenuMessageRight" trigger="click"

需求点击会话列表某个会话，右击下拉菜单自己懒得写，于是使用了组件直接上代码思路是先让下拉菜单隐藏，右击显示，再通过iview源码，设置显示位置<template> <div> <h1>jkfjjfkfkjk</h1> <div @contextmenu.prevent="dblclickGo($event)" style="height: 50px;width: 100px;

一、显示当前时间<div class="header-time"> <div class="courentTime">{{courentTime}}</div></div>data(){returen{ courentTime: '', timer:''} mounted() { this.initTime() } methods: { initTime() { /*时间处理*/

预览艾特开始思路：输入ctrl +@ ，弹出群成员列表弹框，点击成员时，把成员名称添加到输入框，同时隐藏弹框1.点击弹框外任意位置，把弹框关闭即可2.点击删除键时，把@和名称删掉3.要实现艾特提示，输入框显示的是“@某某某”，实际发出去的消息，把@某某某转换为我们限定的某字符串，然后收到消息通过字符串匹配即可下面，我们来一步步实现这功能吧...

需求：撤回消息思路鼠标右键弹出 撤回 按钮点击撤回按钮，拿到当前选中消息id，遍历消息列表拿到消息相关数据，主要是拿到用户名通过接口撤回当前消息在撤回成功回调中重新更新列表数据到这里，有两个办法更新列表 办法一、可以通过http刷新消息列表办法二、也可以遍历本地消息，用元素替换掉当前消息即可办法二效果肯定好一些，毕竟不需要等http回调一、鼠标右键弹出 撤回 按钮消息列表 <li class="tal" v-for="(item,index) in showMesDatas

需求：消息文件名过长，显示部分写一个函数，获取字符串长度，截取部分function getFileName(fileName){ var showFileName =''; var disLength = fileName.length; var substringC = 6; var nameLength = 0; var cutIndex = 0; for(var i=0; i<disLength; i++) { if(escap

需求：双击消息图片，大图预览思路：使用element-ui中的previewSrcList 开启预览大图的功能。绑定双击事件，把消息中的url拿到判断双击事件是否绑定有图片id，预览图片预览图片 <!--图片预览--><div style="z-index: 9999999;"> <el-image-viewer v-if="showViewer" :on-close="closeViewer"

需求：消息有文本和表情图片let emojiList = [ '[大笑]', '[可爱]', '[色]', '[嘘]', '[亲]', '[呆]', '[口水]', '[呲牙]', '[鬼脸]', '[害羞]', '[偷笑]', '[调皮]', '[可怜]', '[敲]', '[惊讶]', '[流感]', '[委屈]', '[流泪]', '[嚎哭]', '[惊恐]', '[怒]', '[酷]', '[不说]', '[鄙视]', '[阿弥陀佛]', '[奸笑]', '[睡着]', '

需求：ctrl+回车换行回车发送消息<!--输入区域--><div class="messagesBox-BigRight-down20-input"> <div style="z-index: 9999"> <el-input class="inputmsg" type="textarea" :rows="4" placehol

需求：左右聊天气泡聊天气泡分为矩形和三角形例如微信气泡使用伪元素，设置三角形<div class="chatBox chatBox-left"> 你好</div> .chatBox{ position: relative; margin:12px; padding:5px 8px; word-break: break-all; background: #ffffff;

发送表情1、表情处理其实很简单，就是用表情图片代替2、发送出去的实际上是文字，通过文字和图片匹配，从而显示表情消息3、中间聊天部分，用数组保存消息数据即可，同时，为了显示表情图片，数组对象中保存有消息数据，以元素的形式，然后使用v-html显示即可这里拿到数据，替换成图片图片数据图片json数据...

发送消息文本数据思路：输入框输入文本数据，点击发送通过发送成功后，把消息数据显示到聊天页面中收到消息同理

需求：聊天模块，可以实现发送文字、表情、图片、文件布局分为三部分左侧会话列表中部聊天列表右侧群组成员列表先来看看效果布局：左边固定大小，中间宽75%，可右展开聊天布局：左消息，撤回消息，右消息，用text-align控制布局 <!--聊天界面--> <div class="messagesBox-BigRight-down80"> &