1

src/components/frame/c-chat.vue

@@ -1,8 +1,8 @@
 <template>
   <div id="c-chat">
     <el-row>
-      <el-col :span="24" class="chat" v-loading="loading" id="chat">
-        <el-col :span="24" class="one" :style="{ height: height }">
+      <el-col :span="24" class="chat" v-loading="loading">
+        <el-col :span="24" class="one" :style="{ height: height }" id="chat">
           <template v-for="(i, index) in list">
             <template v-if="isSender(i)">
               <el-col :span="24" class="senderTime" :key="`div${index}`">
@@ -44,7 +44,7 @@
 // 基础
 import moment from 'moment'
 import type { Ref } from 'vue'
-import { onMounted, ref, toRefs, watch } from 'vue'
+import { onMounted, ref, toRefs, watch, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 
 // 接口
@@ -120,8 +120,10 @@ const isSender = (data) => {
 }
 // 获取高度
 const turnBottom = () => {
-  let height = document.getElementById('#chat').scrollHeight
-  console.log(height)
+  let id = document.getElementById('chat')
+  nextTick(() => {
+    id.scrollTop = id.scrollHeight
+  })
 }
 watch(
   room,
@@ -141,6 +143,7 @@ watch(
     overflow-y: auto;
     .senderTime {
       text-align: left;
+      margin: 0 0 10px 0;
       .p_1 {
         margin: 0 0 10px 0;
         span:nth-child(1) {
@@ -157,6 +160,9 @@ watch(
         }
       }
     }
+    .senderTime:last-child {
+      margin: 0;
+    }
     .receverTime {
       text-align: right;
       margin: 0 0 10px 0;
@@ -170,6 +176,7 @@ watch(
 
       .p_2 {
         span {
+          display: inline-block;
           background-color: #95ec69;
           padding: 5px;
           border-radius: 5px;