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

2020-06-16 06:12:04易采站长站整理

}
},
methods: {
},
}
</script>
<style>
/* 引入公共样式 */
@import './assets/fonts/iconfont.css';
@import './assets/css/reset.css';
@import './assets/css/layout.css';
</style>

◆ vue文本框实现截图粘贴发送图片:


// 【截图粘贴图片】
document.getElementById('J__wcEditor').addEventListener('paste',function(e){
var cbd = e.clipboardData;
var ua = window.navigator.userAgent;
// 没有数据
if (!(e.clipboardData && e.clipboardData.items)) {
return;
}
// Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
if(cbd.items && cbd.items.length === 2 && cbd.items[0].kind === "string" && cbd.items[1].kind === "file" &&
cbd.types && cbd.types.length === 2 && cbd.types[0] === "text/plain" && cbd.types[1] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome/(d{2})/i)[1]) < 49){
return;
}
for(var i = 0; i < cbd.items.length; i++){
var item = cbd.items[i];
console.log(item);
console.log(item.kind);
if(item.kind == "file"){
var blob = item.getAsFile();
if(blob.size === 0){
return;
}
// 插入图片记录
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(){
var _img = this.result;
var _tpl = [
'<li class="me">
<div class="content">
<p class="author">王梅(Fine)</p>
<div class="msg picture"><img class="img__pic" src="'+%20_img%20+%20'" preview="1" /></div>
</div>
<a class="avatar" href="/contact/uinfo"><img src="src/assets/img/uimg/u__chat-img11.jpg" /></a>
</li>'
].join("");
$("#J__chatMsgList").append(_tpl);
setTimeout(() => {
$("#J__geminiScrollbar .gm-scroll-view").animate({ scrollTop: $("#J__chatMsgList").height() }, 0);
$(".fixGeminiscrollHeight").show();
setTimeout(() => { $(".fixGeminiscrollHeight").hide();}, 300);
}, 17);
}
}
}
});

◆ 表情处理及视频预览:


// >>> 【表情、动图swiper切换模块】--------------------------
var emotionSwiper;
function setEmotionSwiper(tmpl) {
var _tmpl = tmpl ? tmpl : $("#J__emotionFootTab ul li.cur").attr("tmpl");
$("#J__swiperEmotion .swiper-container").attr("id", _tmpl);
$("#J__swiperEmotion .swiper-wrapper").html($("." + _tmpl).html());
emotionSwiper = new Swiper('#' + _tmpl, {
// loop: true,
// autoplay: true,
// 分页器
pagination: {
el: '.pagination-emotion', clickable: true,