|
@@ -30,20 +30,23 @@
|
|
|
v-if="_isUrl(item.msg)"
|
|
|
:href="item.msg"
|
|
|
target="_blank"
|
|
|
+ style="margin-left: 10px; margin-top: 15px;"
|
|
|
>
|
|
|
{{ item.msg }}
|
|
|
</a>
|
|
|
<!-- 文本 -->
|
|
|
<div
|
|
|
class="message-content-text"
|
|
|
- v-if="item.messageType === 'text'"
|
|
|
+ v-if="item.type === 'text'"
|
|
|
v-text="_parseText(item.msg)"
|
|
|
+ style="margin-left: 10px; margin-top: 15px;"
|
|
|
></div>
|
|
|
<!-- 图片 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'image'"
|
|
|
+ v-if="item.type === 'image'"
|
|
|
:style="getImageStyle(item.msg)"
|
|
|
+ style="margin-left: 10px; margin-top: 15px;"
|
|
|
>
|
|
|
<viewer style="display: flex; align-items: center">
|
|
|
<img :src="baseUrl + item.msg" alt="" />
|
|
@@ -52,7 +55,8 @@
|
|
|
<!-- 视频格式文件 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'video'"
|
|
|
+ v-if="item.type === 'video'"
|
|
|
+ style="margin-left: 10px; margin-top: 15px;"
|
|
|
>
|
|
|
<video
|
|
|
style="width: 255px"
|
|
@@ -79,13 +83,13 @@
|
|
|
<!-- 文本 -->
|
|
|
<div
|
|
|
class="message-content-text"
|
|
|
- v-if="item.messageType === 'text'"
|
|
|
+ v-if="item.type === 'text'"
|
|
|
v-text="_parseText(item.msg)"
|
|
|
></div>
|
|
|
<!-- 图片 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'image'"
|
|
|
+ v-if="item.type === 'image'"
|
|
|
:style="getImageStyle(item.msg)"
|
|
|
>
|
|
|
<viewer style="display: flex; align-items: center">
|
|
@@ -93,7 +97,7 @@
|
|
|
</viewer>
|
|
|
</div>
|
|
|
<!-- 附件类型消息 -->
|
|
|
- <!-- <div class="message-content-file" v-else-if="item.messageType === 'file'" @click="download(item)">
|
|
|
+ <!-- <div class="message-content-file" v-else-if="item.type === 'file'" @click="download(item)">
|
|
|
<img class="message-content-icon" :src="getFileIcon(item)" alt="" />
|
|
|
<div class="message-content-detail">
|
|
|
<div class="file-name">
|
|
@@ -107,7 +111,7 @@
|
|
|
<!-- 视频格式文件 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'video'"
|
|
|
+ v-if="item.type === 'video'"
|
|
|
>
|
|
|
<video
|
|
|
style="width: 255px"
|
|
@@ -160,13 +164,13 @@
|
|
|
<!-- 文本 -->
|
|
|
<div
|
|
|
class="message-content-text"
|
|
|
- v-if="item.messageType === 'text'"
|
|
|
+ v-if="item.type === 'text'"
|
|
|
v-text="_parseText(item.msg)"
|
|
|
></div>
|
|
|
<!-- 图片 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'image'"
|
|
|
+ v-if="item.type === 'image'"
|
|
|
:style="getImageStyle(item.msg)"
|
|
|
>
|
|
|
<viewer style="display: flex; align-items: center">
|
|
@@ -174,7 +178,7 @@
|
|
|
</viewer>
|
|
|
</div>
|
|
|
<!-- 附件类型消息 -->
|
|
|
- <!-- <div class="message-content-file" v-else-if="item.messageType === 'file'" @click="download(item)">
|
|
|
+ <!-- <div class="message-content-file" v-else-if="item.type === 'file'" @click="download(item)">
|
|
|
<img class="message-content-icon" :src="getFileIcon(item)" alt="" />
|
|
|
<div class="message-content-detail">
|
|
|
<div class="file-name">
|
|
@@ -188,7 +192,7 @@
|
|
|
<!-- 视频格式文件 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'video'"
|
|
|
+ v-if="item.type === 'video'"
|
|
|
>
|
|
|
<video
|
|
|
style="width: 255px"
|
|
@@ -215,13 +219,13 @@
|
|
|
<!-- 文本 -->
|
|
|
<div
|
|
|
class="message-content-text"
|
|
|
- v-if="item.messageType === 'text'"
|
|
|
+ v-if="item.type === 'text'"
|
|
|
v-text="_parseText(item.msg)"
|
|
|
></div>
|
|
|
<!-- 图片 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'image'"
|
|
|
+ v-if="item.type === 'image'"
|
|
|
:style="getImageStyle(item.msg)"
|
|
|
>
|
|
|
<viewer style="display: flex; align-items: center">
|
|
@@ -229,7 +233,7 @@
|
|
|
</viewer>
|
|
|
</div>
|
|
|
<!-- 附件类型消息 -->
|
|
|
- <!-- <div class="message-content-file" v-else-if="item.messageType === 'file'" @click="download(item)">
|
|
|
+ <!-- <div class="message-content-file" v-else-if="item.type === 'file'" @click="download(item)">
|
|
|
<img class="message-content-icon" :src="getFileIcon(item)" alt="" />
|
|
|
<div class="message-content-detail">
|
|
|
<div class="file-name">
|
|
@@ -243,7 +247,7 @@
|
|
|
<!-- 视频格式文件 -->
|
|
|
<div
|
|
|
class="message-content-image"
|
|
|
- v-if="item.messageType === 'video'"
|
|
|
+ v-if="item.type === 'video'"
|
|
|
>
|
|
|
<video
|
|
|
style="width: 255px"
|
|
@@ -295,6 +299,7 @@
|
|
|
@click="saveRangeLocal"
|
|
|
@focus="saveRangeLocal"
|
|
|
@input="saveRangeLocal"
|
|
|
+ @keydown.enter="stopPropagation"
|
|
|
@keyup.enter="sendMsg"
|
|
|
class="chatframe_input_con scrollbar"
|
|
|
contenteditable="true">
|
|
@@ -648,15 +653,17 @@ export default {
|
|
|
}, 0)
|
|
|
},
|
|
|
// ================================================================
|
|
|
-
|
|
|
- sendMsg(e, fileurl) {
|
|
|
- console.log(`e============`, e)
|
|
|
- if (e && e.which === 13) {
|
|
|
- console.log(`e.which`, e.which);
|
|
|
+ // 阻止回车键默认事件
|
|
|
+ stopPropagation(e) {
|
|
|
+ if (e && e.keyCode === 13) {
|
|
|
e.cancelBubble = true;
|
|
|
e.preventDefault();
|
|
|
e.stopPropagation();
|
|
|
}
|
|
|
+ },
|
|
|
+ sendMsg(e, fileurl) {
|
|
|
+ console.log(`e============`, e)
|
|
|
+
|
|
|
if (fileurl) { // 上传文件路径
|
|
|
this.msg = fileurl;
|
|
|
} else { // 输入框信息
|
|
@@ -677,7 +684,7 @@ export default {
|
|
|
const msgInfo = {
|
|
|
...this.self,
|
|
|
msg: this.msg,
|
|
|
- messageType: this.messageType,
|
|
|
+ type: this.messageType,
|
|
|
};
|
|
|
console.log(`msgInfo`, msgInfo);
|
|
|
console.log(`this.selected.id`, this.selected);
|
|
@@ -691,6 +698,8 @@ export default {
|
|
|
console.log(`document.getElementById('charInput')`, document.getElementById('charInput'))
|
|
|
this.msg = "";
|
|
|
this.messageType = "";
|
|
|
+ console.log('===========this.tab=========')
|
|
|
+ console.log(this.tab)
|
|
|
if (this.tab === "friends") {
|
|
|
msgInfo.toid = this.selected.id;
|
|
|
this.$socket.emit("private message", this.selected.id, msgInfo);
|
|
@@ -771,11 +780,11 @@ export default {
|
|
|
},
|
|
|
chat(data) {
|
|
|
console.log(`private message=================`, data);
|
|
|
- if (this.friend_record[data.toid]) {
|
|
|
- this.friend_record[data.toid].push(data);
|
|
|
+ if (this.friend_record[data[0]]) {
|
|
|
+ this.friend_record[data[0]].push(data[1]);
|
|
|
} else {
|
|
|
- this.friend_record[data.toid] = [];
|
|
|
- this.friend_record[data.toid].push(data);
|
|
|
+ this.friend_record[data[0]] = [];
|
|
|
+ this.friend_record[data[0]].push(data[1]);
|
|
|
}
|
|
|
if (this.friend_record[this.selected.id]) {
|
|
|
this.friend_record_list = this.friend_record[this.selected.id];
|
|
@@ -784,7 +793,10 @@ export default {
|
|
|
this.$refs["myScrollbar"].wrap.scrollHeight;
|
|
|
});
|
|
|
}
|
|
|
- addCookie("room_record", JSON.stringify(this.room_record));
|
|
|
+ console.log(`this.friend_record`, this.friend_record)
|
|
|
+ console.log(`this.selected.id`, this.selected.id)
|
|
|
+ console.log(`this.friend_record_list`, this.friend_record_list)
|
|
|
+ addCookie("friend_record", JSON.stringify(this.friend_record));
|
|
|
},
|
|
|
room_msg(data) {
|
|
|
console.log("======room msg===");
|
|
@@ -926,6 +938,14 @@ export default {
|
|
|
overflow-y: scroll;
|
|
|
margin-bottom: 20px;
|
|
|
margin-top: 5px;
|
|
|
+
|
|
|
+ // 超出自动换行 -- 火狐
|
|
|
+ word-wrap: break-word;
|
|
|
+ word-break: break-all;
|
|
|
+
|
|
|
+ // 滚动样式 细 - 火狐
|
|
|
+ scrollbar-width: thin;
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.chatframe-text {
|