vue web端仿微信网页版聊天室功能

一、项目介绍

基于vue 2。5 .6 Vuex vue-CLI vue-路由器双子座滚动条swiper elementUI等技术混合架构开发的仿微信网端聊天室——vueWebChat，实现了发送消息、表情（动图),图片、视频预览，右键菜单、截屏、截图可直接粘贴至文本框进行发送。

二、技术框架

视图模型框架：Vue2.5.6状态管理：Vuex页面路由：Vue-路由器图标字体图标：阿里巴巴字体图标库•自定义滚动条：vue-双子座-滚动条弹窗组件：元素-用户界面（饿了么前端用户界面库)•环境配置：node.js cnpm webpack高德地图：vue-amap图片预览：vue-照片-预览

点击右上角最大化按钮，可以进行全屏切换

引入公共及全局组件配置组件。射流研究…

/* 引入公共及全局组件配置*///引入侧边栏及联系人从""导入winBar ./components/winbar "从导入侧栏"。/组件/侧栏"从导入记录列表"。/组件/记录列表"从导入联系人列表"。/组件/联系人'//引入来自" jquery"//的jqueryimport $引入wcPop弹窗插件从""导入wcPop ./assets/js/WCPoP/WCPoP“导入”./assets/js/wcPop/skin/wcPop。CSS '//引入饿了么个人计算机端用户界面库从"元素-用户界面"导入元素ui“导入”元素-ui/lib/主题-粉笔/index。CSS//引入图片预览插件从“vue-照片-预览”导入' photoPreview '导入vue-照片-预览/距离/皮肤。CSS '//引入自定义滚动条插件从“vue-Gemini-滚动条”/导入geminiScrollbar引入加载更多插件从“vue-无限滚动"//导入无限滚动引入高德地图从“Vue-AMAP”常量安装=Vue={//注册组件Vue.component('win-bar '，winBar) Vue.component('side-bar '，侧栏)Vue.component('记录列表'，记录列表)Vue。组件('联系人列表'，联系人列表)//应用实例vue。使用(ElEMENTui)vue。使用(照片视图，{ loop: false，fullscreenEl: true，//是否全屏箭头：为真，//左右按钮});vue。使用(GeminisCrollbar)vue。使用(InfiniTeloading)vue。使用(vueAMap)vueAMap。initamapapiloader({ key : ' E1 ded C6 BDD 765d 46693986 ff 7 ff 969 f 4 '，plugin: [ 'AMap .自动完成',//输入提示插件AMap .PlaceSearch '，//POI搜索插件AMap .刻度',//右下角缩略图插件比例尺AMap .' OverView '，//地图鹰眼插件AMap .工具栏',//地图工具条AMap .MapType '，//类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制AMap .聚酯聚酯树脂',//编辑折线多，边形AMap .CircleEditor '，//圆形编辑器插件AMap .地理位置'//定位控件，用来获取和展示用户主机所在的经纬度位置]，ui版本： ' 1.0 ' })；}导出默认安装主页面模板

模板div id=' app ' div class=' vChat-wrapper flex box flex-alignc ' div class=' vChat-panel ' style=' background-image : URL(src/assets/img/placeholder/vChat _ _ panel-BG 01。jpg)；'div class=' vChat-内部flexbox！- //顶部按钮（最大、最小、关闭)-赢吧/赢吧！- //侧边栏-侧栏/侧栏保持活动路由器-视图类=' flex 1 flexbox '/路由器-视图/保持活动/div/div/div/templatescript导出默认值{ name : ' app '，data(){ return } }，methods : { }/script style/*引入公共样式*/@导入./资产/字体/图标字体。CSS '；@import ./资产/CSS/重置。CSS '；@import ./资产/CSS/布局。CSS '；/style vue文本框实现截图粘贴发送图片：

//【截图粘贴图片】文档。getelementbyid(' J _ _ wcEditor ').添加事件侦听器(“粘贴”)，函数{ var CBD=e . clipboarddatavar ua=窗口。领航员。用户代理；//没有数据if(！(e .剪贴板数据。items)){ return；} //Mac平台下Chrome49版本以下复制探测器中的文件的病菌黑客掉if(CBD。项目CBD。物品。长度===2个CBD。项目[0].kind==='string' cbd.items[1].kind==' file ' CBD。类型CBD。类型。长度===2个CBD。type[0]==' text/plain ' CBD。类型[1]==“文件”ua。匹配(/Macintosh/I)号码(ua。match(/Chrome \/(\ d { 2 })/I)[1])49){ return；} for(var I=0；一、生物多样性公约。物品。长度；I){ var item=CBD。项目[一]；console.log(项目);控制台。日志(项目。种类)；if(项目。kind==' file '){ var blob=item。getas file()；if(blob。size====0){ return；} //插入图片记录var reader=new FileReader()；读者。readasdataurl(blob)；读者。onload=function(){ var _ img=this。结果；var _ TPL=[' Li class=' me ' \ div class=' content ' \ p class=' author '王梅(Fine)/p \ div class=' msg picture ' img class=' img _ _ pic ' src=' http : ' _ img ' ' preview=' 1 '/div \/div \ a class=' avatar ' href='/contact/uinfo ' img src=' http 3360 src/assets/img/ui mg/u _ _ chat-img 11。jpg '/a \/Li '].join(' ')；$('#J__chatMsgList ').追加(_ TPL)；setTimeout(()={ $(' # J _ _ GeminisCrolbar .通用汽车滚动-视图')。动画({ scroll top : $(' # J _ _ ChatmsGlist ').height() }，0)；$('.fixGeminiscrollheight ').show()；setTimeout(()={ $(').fixGeminiscrollheight ').hide()；}, 300);}, 17);} } }}); 表情处理及视频预览：

//【表情、动图捣蛋鬼切换模块】-var emotionSwiper；函数setemotionsweeper(tmpl){ var _ tmpl=tmpl？tmpl : $(' # J _ _ emotionFootTab ul Li。cur ').attr(' tmpl ')；$('#J__swiperEmotion .swiper-容器').attr('id '，_ tmpl)；$('#J__swiperEmotion .swiper-wrapper ').html($(' . '_tmpl).html())；emotionSwiper=new Swiper(' # ' _ tmpl，{ //loop: true，//autoplay: true，//分页器分页： { El : } .paging-emotion '，clickable: true，}，})；}//表情模板切换$(“正文”).on('click '，' # J _ _ emotionFootTab ul Li。swippertmpl '，function () { //先销毁嗖嗖情感嗖嗖情感嗖嗖。破坏(真实，真实)；var _tmpl=$(this).attr(' tmpl ')；$(这个)。addClass('cur ').兄弟姐妹()。移除CLaSS(' cur ')；setEmotionSwiper(_ tmpl)；});//【视频预览模块】- $('body ').on('click '，' #J__chatMsgList li .视频，函数(){ var _src=$(this).查找(' img ').attr('videoUrl ')，_ video var video idx=wcPop({ id : ' WC _ _ preview video '，skin: 'fullscreen '，//content : ' video id=' J _ _ video preview ' width=' 100% ' height=' 100% ' controls=' controls ' X5-video-player-type=' H5 ' X5-video-player-full screen=' true ' WebKit-playsinline preload=' auto '/video '，content : '填充-top :48 px；anim: 'scaleIn '，show : function(){ _ video=document。getelementbyid(' J _ _视频预览')；_ video.src=_ srcif (_video。暂停){ _视频。play()；} else { _ video。pause()；} //播放结束_video.addEventListener('ended '，function(){ _ video。当前时间=0；});//退出全屏_视频。addeventlistener(' X5视频exitfulscreen '，function(){ wcpop。关闭(视频idx)；}) } });});总结

以上所述是小编给大家介绍的某视频剪辑软件网络端仿微信网页版聊天室功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！