修改聊天拉动的bug

src/views/liveChat/index.vue

@@ -4,7 +4,7 @@ export default {
 };
 </script>
 <script setup>
-import { ref, reactive, toRaw, toRefs } from "vue";
+import { ref, reactive, toRaw, toRefs, nextTick } from "vue";
 import { useRouter, useRoute } from "vue-router";
 import useUserStore from "@/store/modules/user";
 import word from "@/assets/images/word2.png";
@@ -73,12 +73,14 @@ const getMsgList = async () => {
   // );
 
   searchData.value = personList.data;
-    //圆点======
-    searchData.value.map((i) => {
-       if(i.fromId==websoctStore.messOne?.fromId){i.showCircel=true}else{
-        i.showCircel=false
-       }
-    });
+  //圆点======
+  searchData.value.map((i) => {
+    if (i.fromId == websoctStore.messOne?.fromId) {
+      i.showCircel = true;
+    } else {
+      i.showCircel = false;
+    }
+  });
   //圆点======
   sendCont.data.toId =
     personList.data[0]?.toId == userIds.uid
@@ -108,6 +110,14 @@ const msgRecordEvent = async (toIdValue) => {
       i.createTime = i.createTime.substring(11);
   });
   total.value = resMsgData.total;
+  //发送消息后滚动到最底部显示最新消息
+  const chatContainer = document.querySelector(".right-container");
+  // 计算滚动的目标位置
+  const targetScrollTop = chatContainer.scrollHeight;
+  // 设置滚动位置
+  nextTick(() => {
+    chatContainer.scrollTop = targetScrollTop;
+  });
 };
 //点击左侧新建聊天
 const open = ref(false);
@@ -135,9 +145,11 @@ const clickPerson = (index, item) => {
   clickPersonIndex.value = index;
   //点击某个人就不显示红点
   searchData.value.map((i) => {
-       if(i.fromId==websoctStore.messOne?.fromId){i.showCircel=false}
-    });
-    const chatContainer = document.querySelector(".right-container");
+    if (i.fromId == websoctStore.messOne?.fromId) {
+      i.showCircel = false;
+    }
+  });
+  const chatContainer = document.querySelector(".right-container");
   // 计算滚动的目标位置
   const targetScrollTop = chatContainer.scrollHeight;
   // 设置滚动位置
@@ -182,25 +194,46 @@ const changeMsg = async (val) => {
 };
 
 //发送聊天
-const msgSendClick = () => {
-  noMes.value = false;
-  if (messageText.value.trim() == "") {
-    return ElMessage({ message: "不能发送空白消息", type: "error" });
+const inputRef = ref(null);
+const msgSendClick = (event) => {
+  console.log(event);
+  if (event.ctrlKey && event.keyCode == 13) {
+    //CTRL+enter键换行
+    const textarea = event.target;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const text = messageText.value;
+    messageText.value = text.slice(0, start) + "\n" + text.slice(end);
+    nextTick(() => {
+      textarea.selectionStart = start + 1;
+      textarea.selectionEnd = start + 1;
+    });
+    event.preventDefault();
+  } else if (event.shiftKey && event.keyCode == 13) {
+    event.preventDefault();
+  } else {
+    console.log("onlyenter");
+    noMes.value = false;
+    if (messageText.value.trim() == "") {
+      return ElMessage({ message: "不能发送空白消息", type: "error" });
+    }
+    const message = {
+      content: messageText.value,
+      msgType: "2",
+      fileList: [],
+      toId: sendCont.data.toId,
+    };
+    websoctStore.sendMessage(message);
+    //发送消息后滚动到最底部显示最新消息
+    const chatContainer = document.querySelector(".right-container");
+    // 计算滚动的目标位置
+    const targetScrollTop = chatContainer.scrollHeight;
+    // 设置滚动位置
+    chatContainer.scrollTop = targetScrollTop;
+    event.preventDefault();
+    messageText.value = "";
+    //  将光标设置到输入框第一行
   }
-  const message = {
-    content: messageText.value,
-    msgType: "2",
-    fileList: [],
-    toId: sendCont.data.toId,
-  };
-  websoctStore.sendMessage(message);
-  //发送消息后滚动到最底部显示最新消息
-  const chatContainer = document.querySelector(".right-container");
-  // 计算滚动的目标位置
-  const targetScrollTop = chatContainer.scrollHeight;
-  // 设置滚动位置
-  chatContainer.scrollTop = targetScrollTop;
-  messageText.value = "";
 };
 //发送文件确认按钮
 const fileChangeMsg = async (val) => {
@@ -236,13 +269,14 @@ watchEffect(() => {
   }
 });
 // 滚动翻页========
+const mainContainer=ref(null)
 const noMes = ref(false);
 const handleScroll = (event) => {
   // 在滚动到顶部时，加载上一页的聊天记录
-  const mainContainer = document.querySelector(".right-container");
+  const mainContainer2 = document.querySelector(".right-container");
   if (
     event.deltaY < 0 &&
-    mainContainer.scrollTop <= 1 &&
+    mainContainer2.scrollTop <= 1 &&
     !noMes.value &&
     !loading.value
   ) {
@@ -256,22 +290,31 @@ const loadPreviousPage = async () => {
     pageNum: currentPageNum,
     pageSize: 10,
   };
-  const resMsgData = await msgRecord(sendCont.data.toId, queryParams);
-  const previousPageData = resMsgData.rows.reverse();
-  chatRecords.data = [...previousPageData, ...chatRecords.data];
-  const nowtime2 = parseTime(new Date().getTime(), "{y}-{m}-{d}");
-  chatRecords.data.map((i) => {
-    if (nowtime2 == i.createTime.substr(0, 10))
-      i.createTime = i.createTime.substring(11);
-  });
-  noMes.value = false;
-  if (currentPageNum * 10 >= resMsgData.total && !noMes.value) {
+  setTimeout(async () => {
+    const resMsgData = await msgRecord(sendCont.data.toId, queryParams);
+    const previousPageData = resMsgData.rows.reverse();
+    chatRecords.data = [...previousPageData, ...chatRecords.data];
+    const nowtime2 = parseTime(new Date().getTime(), "{y}-{m}-{d}");
+    chatRecords.data.map((i) => {
+      if (nowtime2 == i.createTime.substr(0, 10))
+        i.createTime = i.createTime.substring(11);
+    });
+    noMes.value = false;
+    if (currentPageNum * 10 >= resMsgData.total && !noMes.value) {
+      loading.value = false;
+      noMes.value = true;
+      return;
+    }
+    await nextTick();
+    const mainContainer = document.querySelector(".right-container");
+  const newMessages = document.querySelectorAll(".message-container");
+  const firstNewMessage = newMessages[previousPageData.length];
+  const firstNewMessageTop = mainContainer.offsetHeight +  100;
+  console.log('firstNewMessageTop', firstNewMessageTop)
+  mainContainer.scrollTop = firstNewMessageTop;
+    // 将加载的上一页聊天记录插入到 chatRecords.data 的前面
     loading.value = false;
-    noMes.value = true;
-    return;
-  }
-  // 将加载的上一页聊天记录插入到 chatRecords.data 的前面
-  loading.value = false;
+  }, 50);
 };
 const transferFiles = (forwardVal, msgIds, indexs) => {
   chatRecords.data.map((i, index) => {
@@ -311,6 +354,12 @@ const SearchChat = () => {
     getMsgList();
   }
 };
+//转聊天记录的/n为实际样式
+const formatText = (text) => {
+  const formattedText = text.replace(/\n/g, "<br>");
+  return formattedText;
+};
+
 // 滚动翻页========
 onMounted(() => {
   getMsgList();
@@ -386,7 +435,7 @@ onMounted(() => {
         </div>
         <span
           class="yuandian"
-          v-if="item.showCircel&& $route.path == '/index'"
+          v-if="item.showCircel && $route.path == '/index'"
         ></span>
       </div>
     </div>
@@ -443,9 +492,13 @@ onMounted(() => {
                   <span v-if="record.msgType == '1'">{{
                     record.file?.fileName
                   }}</span>
-                  <span v-else-if="record.msgType == '2'">{{
+                  <!-- <span v-else-if="record.msgType == '2'">{{
                     record.content
-                  }}</span>
+                  }}</span> -->
+                  <span
+                    v-else-if="record.msgType == '2'"
+                    v-html="formatText(record.content)"
+                  ></span>
                 </div>
               </div>
               <img :src="chat" class="head-sculpture" />
@@ -479,9 +532,13 @@ onMounted(() => {
                     <span v-if="record.msgType == '1'">{{
                       record.file?.fileName
                     }}</span>
-                    <span v-else-if="record.msgType == '2'">{{
+                    <!-- <span v-else-if="record.msgType == '2'">{{
                       record.content
-                    }}</span>
+                    }}</span> -->
+                    <span
+                      v-else-if="record.msgType == '2'"
+                      v-html="formatText(record.content)"
+                    ></span>
                   </div>
                 </div>
                 <img
@@ -519,12 +576,15 @@ onMounted(() => {
               v-model="messageText"
               class="w-50 m-2"
               type="textarea"
-              :autosize="{ minRows: 3, maxRows:5 }"
+              :autosize="{ minRows: 3, maxRows: 5 }"
               clearable
+              ref="inputRef"
               size="small"
               placeholder="请输入聊天内容"
               maxlength="800"
-              @keydown.enter="msgSendClick"
+              @keyup.ctrl.enter="msgSendClick($event)"
+              @keyup.shift.enter="msgSendClick($event)"
+              @keyup.enter="msgSendClick($event)"
             />
             <!-- 发送按钮 -->
             <img :src="send" class="send-info" @click="msgSendClick" />