//每次页面渲染完之后滚动条在最底部
updated:function(){
this.scrollToBottom();
},
created:function(){
this.connectIm()
this.scrollToBottom()
},
watch:{
nowItem(newVal, oldVal) {
this.getNote(newVal)
}
},
methods:{
scrollToBottom: function () {
this.$nextTick(() => {
if(this.$refs.chatPage_right_ref && this.$refs.chatPage_right_ref.length>0){
this.$refs.chatPage_right_ref.forEach((item)=>{
this.$refs.chatPage_right_main_ref.scrollTop = item.clientHeight + this.$refs.chatPage_right_main_ref.scrollTop;
})
}
})
},
<div class="chatPage_right_main" ref="chatPage_right_main_ref">
<div v-for="(item, index) in nowMsg" :key="index" ref="chatPage_right_ref">
<div class="chatPage_right_main_right" v-if="item.is_main == 1">
<div>
<img src="/Application/Home/View/szzmzb/Public/img/openMessge.png" alt="">
</div>
<div class="chatPage_right_main_messge">
{{item.content}}
</div>
</div>
<div class="chatPage_left_main_left" v-else>
<div class="chatPage_left_main_messge">
{{item.content}}
</div>
<div>
<img src="/Public/images/kefu.jpg" alt="">
</div>
</div>
</div>
</div>
<div class="chatMessge">
<div class="accept_chat_Messge" ref="ref_accept_chat_Messge">
<div ref="accept_chat_main" class="accept_chat_main" v-for="(items, key) in msgObj" :key="key" v-show="key == activeKey">
<div v-for="(item, k) in items" :key="k">
<!-- <div class="accept_header">
<div class="accept_header_messge">
欢迎您的咨询，期待为您服务!
</div>
</div> -->
<div class="accept_chat_left" v-if="(userInfo.is_supply > 0 && item.is_main == 1) || (userInfo.is_supply == 0 && item.is_main == 2)">
<div class="accept_chat_main_left">
<div><img src="/Application/Home/View/szzmzb/Public/img/openMessge.png" alt=""></div>
<div class="accept_chat_main_left_center">
<div style="font-size: 12px;
color: #62778C;">{{item.add_time}}</div>
<div class="accept_chat_main_left_box">
<div style="line-height: 1.7;">
{{item.content}}
</div>
</div>
</div>
</div>
</div>
<div class="accept_chat_right" v-if="(userInfo.is_supply > 0 && item.is_main == 2) || (userInfo.is_supply == 0 && item.is_main == 1)">
<div class="accept_chat_main_right">
<div class="accept_chat_main_right_center">
<div style="font-size: 12px;
color: #62778C;">{{item.add_time}}</div>
<div class="accept_chat_main_left_box">
<div style="line-height: 1.7;">
{{item.content}}
</div>
</div>
</div>
<div>
<img src="/Application/Home/View/szzmzb/Public/img/openMessge.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
mounted () {
this.scrollToBottom();
},
//每次页面渲染完之后滚动条在最底部
updated:function(){
this.scrollToBottom();
},
created:function(){
this.scrollToBottom();
this.initSupply()
this.connectIm()
},
methods:{
scrollToBottom: function () {
this.$nextTick(() => {
if(this.$refs.accept_chat_main.length>0){
console.log()
Array.from([...this.$refs.accept_chat_main]).forEach((item)=>{
console.log(item.clientHeight)
this.$refs.ref_accept_chat_Messge.scrollTop = item.clientHeight + this.$refs.ref_accept_chat_Messge.scrollTop;
})
}
})
},
pasteSendMsg(e){
var cbd = e.clipboardData;
// 如果是 Safari 直接 return
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];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
var reader = new FileReader();
var imgs = new Image();
imgs.file = blob;
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(imgs);
reader.readAsDataURL(blob);
var userAgent = navigator.userAgent;
var desc = navigator.mimeTypes['application/x-shockwave-flash'];
//我看好多方法是用注释这一句,但是实践起来,在谷歌浏览器里navigator.mimeTypes['application/x-shockwave-flash']打印没有值,所以后面的方法会报错
//navigator.mimeTypes['application/x-shockwave-flash'].description.toLowerCase();
if (userAgent.indexOf("Chrome") > -1) {
if(!desc){
//谷歌浏览器
console.log('谷歌浏览器')
}else{
//360浏览器
console.log('360浏览器')
this.$refs.send_input.appendChild(imgs);
}
}else{
//其他浏览器
this.$refs.send_input.appendChild(imgs);
}
}
}
var pastedText = ""
if(window.clipboardData && window.clipboardData.getData) {
// 获取拷贝进剪切板指定格式的数据 (此处用的Text格式)
pastedText = window.clipboardData.getData('Text')
console.log(pastedText,"pastedText1")
}
if((e.clipboardData || e.originalEvent.clipboardData) && (e.clipboardData || e.originalEvent.clipboardData).getData) {
pastedText = (e.originalEvent || e).clipboardData.getData('text/plain')
console.log(pastedText,"pastedText2")
if(pastedText){
var str = pastedText.replace(/\s+/g,"");
if(this.$refs.send_input.hasAttribute("contenteditable")){
this.$refs.send_input.removeAttribute("contenteditable")
}
this.$refs.send_input.innerHTML +=str
this.$refs.send_input.setAttribute("contenteditable",'true')
}
}
网友评论