|
|
@ -1,7 +1,7 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()"> |
|
|
<div class="chat-box" @click="closeRefBox()" @mousemove="readedMessage()"> |
|
|
<el-container> |
|
|
<el-container> |
|
|
<el-header height="60px"> |
|
|
<el-header height="56px"> |
|
|
<span>{{ title }}</span> |
|
|
<span>{{ title }}</span> |
|
|
<span title="群聊信息" v-show="this.chat.type == 'GROUP'" class="btn-side el-icon-more" |
|
|
<span title="群聊信息" v-show="this.chat.type == 'GROUP'" class="btn-side el-icon-more" |
|
|
@click="showSide = !showSide"></span> |
|
|
@click="showSide = !showSide"></span> |
|
|
@ -25,7 +25,7 @@ |
|
|
</el-main> |
|
|
</el-main> |
|
|
<el-footer height="240px" class="im-chat-footer"> |
|
|
<el-footer height="240px" class="im-chat-footer"> |
|
|
<div class="chat-tool-bar"> |
|
|
<div class="chat-tool-bar"> |
|
|
<div title="表情" class="icon iconfont icon-biaoqing" ref="emotion" |
|
|
<div title="表情" class="icon iconfont icon-emoji" ref="emotion" |
|
|
@click.stop="showEmotionBox()"> |
|
|
@click.stop="showEmotionBox()"> |
|
|
</div> |
|
|
</div> |
|
|
<div title="发送图片"> |
|
|
<div title="发送图片"> |
|
|
@ -58,7 +58,7 @@ |
|
|
<div contenteditable="true" v-show="!sendImageUrl" ref="editBox" class="send-text-area" |
|
|
<div contenteditable="true" v-show="!sendImageUrl" ref="editBox" class="send-text-area" |
|
|
:disabled="lockMessage" @paste.prevent="onEditorPaste" |
|
|
:disabled="lockMessage" @paste.prevent="onEditorPaste" |
|
|
@compositionstart="onEditorCompositionStart" @compositionend="onEditorCompositionEnd" |
|
|
@compositionstart="onEditorCompositionStart" @compositionend="onEditorCompositionEnd" |
|
|
@input="onEditorInput" :placeholder="isReceipt ? '【回执消息】' : ''" @blur="onEditBoxBlur()" |
|
|
@input="onEditorInput" :placeholder="placeholder" @blur="onEditBoxBlur()" |
|
|
@keydown.down="onKeyDown" @keydown.up="onKeyUp" @keydown.enter.prevent="onKeyEnter">x |
|
|
@keydown.down="onKeyDown" @keydown.up="onKeyUp" @keydown.enter.prevent="onKeyEnter">x |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@ -123,6 +123,7 @@ export default { |
|
|
groupMembers: [], |
|
|
groupMembers: [], |
|
|
sendImageUrl: "", |
|
|
sendImageUrl: "", |
|
|
sendImageFile: "", |
|
|
sendImageFile: "", |
|
|
|
|
|
placeholder: "", |
|
|
isReceipt: true, |
|
|
isReceipt: true, |
|
|
showVoice: false, // 是否显示语音录制弹窗 |
|
|
showVoice: false, // 是否显示语音录制弹窗 |
|
|
showSide: false, // 是否显示群聊信息栏 |
|
|
showSide: false, // 是否显示群聊信息栏 |
|
|
@ -191,6 +192,7 @@ export default { |
|
|
this.atSearchText = this.focusNode.textContent.substring(stIdx + 1); |
|
|
this.atSearchText = this.focusNode.textContent.substring(stIdx + 1); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
this.refreshPlaceHolder(); |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
onEditorCompositionStart() { |
|
|
onEditorCompositionStart() { |
|
|
@ -238,6 +240,7 @@ export default { |
|
|
}, |
|
|
}, |
|
|
onSwitchReceipt() { |
|
|
onSwitchReceipt() { |
|
|
this.isReceipt = !this.isReceipt; |
|
|
this.isReceipt = !this.isReceipt; |
|
|
|
|
|
this.refreshPlaceHolder(); |
|
|
}, |
|
|
}, |
|
|
createSendText() { |
|
|
createSendText() { |
|
|
let sendText = this.isReceipt ? "【回执消息】" : ""; |
|
|
let sendText = this.isReceipt ? "【回执消息】" : ""; |
|
|
@ -684,6 +687,17 @@ export default { |
|
|
let div = document.getElementById("chatScrollBox"); |
|
|
let div = document.getElementById("chatScrollBox"); |
|
|
div.scrollTop = div.scrollHeight; |
|
|
div.scrollTop = div.scrollHeight; |
|
|
}); |
|
|
}); |
|
|
|
|
|
}, |
|
|
|
|
|
refreshPlaceHolder(){ |
|
|
|
|
|
console.log("placeholder") |
|
|
|
|
|
if(this.isReceipt){ |
|
|
|
|
|
this.placeholder = "【回执消息】" |
|
|
|
|
|
}else if(this.$refs.editBox && this.$refs.editBox.innerHTML){ |
|
|
|
|
|
this.placeholder = "" |
|
|
|
|
|
}else{ |
|
|
|
|
|
this.placeholder = "聊点什么吧~"; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
computed: { |
|
|
computed: { |
|
|
@ -710,6 +724,7 @@ export default { |
|
|
} |
|
|
} |
|
|
return this.chat.messages.length; |
|
|
return this.chat.messages.length; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}, |
|
|
}, |
|
|
watch: { |
|
|
watch: { |
|
|
chat: { |
|
|
chat: { |
|
|
@ -735,6 +750,8 @@ export default { |
|
|
this.resetEditor(); |
|
|
this.resetEditor(); |
|
|
// 复位回执消息 |
|
|
// 复位回执消息 |
|
|
this.isReceipt = false; |
|
|
this.isReceipt = false; |
|
|
|
|
|
// 更新placeholder |
|
|
|
|
|
this.refreshPlaceHolder(); |
|
|
} |
|
|
} |
|
|
}, |
|
|
}, |
|
|
immediate: true |
|
|
immediate: true |
|
|
@ -763,29 +780,25 @@ export default { |
|
|
border: #dddddd solid 1px; |
|
|
border: #dddddd solid 1px; |
|
|
|
|
|
|
|
|
.el-header { |
|
|
.el-header { |
|
|
padding: 5px; |
|
|
padding: 3px; |
|
|
background-color: white; |
|
|
background-color: #5870e6; |
|
|
line-height: 50px; |
|
|
line-height: 50px; |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
font-weight: 600; |
|
|
font-weight: 600; |
|
|
border: #dddddd solid 1px; |
|
|
color: #f8f8f8; |
|
|
|
|
|
|
|
|
.btn-side { |
|
|
.btn-side { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
right: 20px; |
|
|
right: 20px; |
|
|
line-height: 60px; |
|
|
line-height: 50px; |
|
|
font-size: 22px; |
|
|
font-size: 25px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
|
|
font-size: 30px; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.im-chat-main { |
|
|
.im-chat-main { |
|
|
padding: 0; |
|
|
padding: 0; |
|
|
border: #dddddd solid 1px; |
|
|
|
|
|
|
|
|
|
|
|
.im-chat-box { |
|
|
.im-chat-box { |
|
|
>ul { |
|
|
>ul { |
|
|
@ -802,23 +815,21 @@ export default { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
padding: 0; |
|
|
padding: 0; |
|
|
border: #dddddd solid 1px; |
|
|
|
|
|
|
|
|
|
|
|
.chat-tool-bar { |
|
|
.chat-tool-bar { |
|
|
|
|
|
|
|
|
display: flex; |
|
|
display: flex; |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: 40px; |
|
|
height: 40px; |
|
|
text-align: left; |
|
|
text-align: left; |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
border: #dddddd solid 1px; |
|
|
border-top: #ccc solid 1px; |
|
|
padding: 2px; |
|
|
padding: 2px; |
|
|
|
|
|
background-color: #E8F2FF; |
|
|
>div { |
|
|
>div { |
|
|
font-size: 22px; |
|
|
font-size: 22px; |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
color: #333333; |
|
|
color: black; |
|
|
line-height: 34px; |
|
|
line-height: 34px; |
|
|
width: 34px; |
|
|
width: 34px; |
|
|
height: 34px; |
|
|
height: 34px; |
|
|
|
blue
2 years ago