Browse Source

火狐滚动条,个人聊天

wangwei97 4 years ago
parent
commit
67ebd7aac1
1 changed files with 46 additions and 26 deletions
  1. 46 26
      src/components/ChatFrame.vue

+ 46 - 26
src/components/ChatFrame.vue

@@ -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 {