修改

src/main.ts

@@ -25,6 +25,16 @@ import * as echarts from 'echarts';
 import frameComponents from '@/components/index';
 
 const app = createApp(App);
+app.directive('scrollBottom', {
+  updated(el) {
+    // 这里的el即是绑定指令处的dom元素
+    el.scrollTo({
+      top: el.scrollHeight - el.clientHeight,
+      behavior: 'smooth'
+    });
+  }
+});
+
 app.use(createPinia());
 app.use(router);
 app.use(ElementPlus, { locale });

src/views/user/user/chat.vue

@@ -6,40 +6,50 @@
           <cSearch :is_back="true" @toBack="toBack"></cSearch>
         </el-col>
         <el-col :span="14" class="two">
-          <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
-            <el-col :span="24" class="list" v-for="item in list" :key="item._id">
-              <el-col :span="24" class="two_1" v-if="item.speaker == user._id">
-                <el-col class="time" v-if="item.time != ''">{{ item.time }}</el-col>
-                <el-col :span="24" class="content">
-                  <el-col :span="2" class="logo">
-                    <el-image v-if="user && user.logo.length != 0" :src="user.logo[0].url || '../../assets/bglogin.jpg'"
-                      style="width: 60px; height: 60px; border-radius: 60px" mode="widthFix"></el-image>
-                  </el-col>
-                  <el-col :span="8" v-if="item.msg_type == '0'">
-                    <text class="text">{{ item.content }}</text>
-                  </el-col>
-                  <el-col :span="8" class="image" v-else>
-                    <el-image :src="item.content" style="width: 15vw" mode="widthFix"></el-image>
+          <div style="overflow: auto" v-scrollBottom>
+            <ul v-infinite-scroll="load" class="infinite-list">
+              <el-col :span="24" class="list" v-for="item in list" :key="item._id">
+                <el-col :span="24" class="two_1" v-if="item.speaker == user._id">
+                  <el-col class="time" v-if="item.time != ''">{{ item.time }}</el-col>
+                  <el-col :span="24" class="content">
+                    <el-col :span="2" class="logo">
+                      <el-image
+                        v-if="user && user.logo.length != 0"
+                        :src="user.logo[0].url || '../../assets/bglogin.jpg'"
+                        style="width: 60px; height: 60px; border-radius: 60px"
+                        mode="widthFix"
+                      ></el-image>
+                    </el-col>
+                    <el-col :span="8" v-if="item.msg_type == '0'">
+                      <text class="text">{{ item.content }}</text>
+                    </el-col>
+                    <el-col :span="8" class="image" v-else>
+                      <el-image :src="item.content" style="width: 15vw" mode="widthFix"></el-image>
+                    </el-col>
                   </el-col>
                 </el-col>
-              </el-col>
-              <el-col :span="24" class="two_2" v-else>
-                <el-col class="time" v-if="item.time != ''">{{ item.time }}</el-col>
-                <el-col :span="24" class="content">
-                  <el-col :span="8" v-if="item.msg_type == '0'">
-                    <text class="text">{{ item.content }}</text>
-                  </el-col>
-                  <el-col :span="8" class="image" v-else>
-                    <el-image :src="item.content" style="width: 15vw" mode="widthFix"></el-image>
-                  </el-col>
-                  <el-col :span="2" class="logo">
-                    <el-image v-if="config && config.file.length != 0" :src="config.file[0].url"
-                      style="width: 60px; height: 60px; border-radius: 60px" mode="widthFix"></el-image>
+                <el-col :span="24" class="two_2" v-else>
+                  <el-col class="time" v-if="item.time != ''">{{ item.time }}</el-col>
+                  <el-col :span="24" class="content">
+                    <el-col :span="8" v-if="item.msg_type == '0'">
+                      <text class="text">{{ item.content }}</text>
+                    </el-col>
+                    <el-col :span="8" class="image" v-else>
+                      <el-image :src="item.content" style="width: 15vw" mode="widthFix"></el-image>
+                    </el-col>
+                    <el-col :span="2" class="logo">
+                      <el-image
+                        v-if="config && config.file.length != 0"
+                        :src="config.file[0].url"
+                        style="width: 60px; height: 60px; border-radius: 60px"
+                        mode="widthFix"
+                      ></el-image>
+                    </el-col>
                   </el-col>
                 </el-col>
               </el-col>
-            </el-col>
-          </ul>
+            </ul>
+          </div>
         </el-col>
         <el-col :span="14" class="bottom">
           <el-col :span="20" class="input">
@@ -47,8 +57,7 @@
           </el-col>
           <el-col :span="4" class="button">
             <el-button type="primary" @click="toSend">发送</el-button>
-            <cUpload class="upload" :limit="1" accept="*" url="/files/travel/chat/upload" :list="file" @change="onUpload">
-            </cUpload>
+            <cUpload class="upload" :limit="1" accept="*" url="/files/travel/chat/upload" :list="file" @change="onUpload"> </cUpload>
           </el-col>
         </el-col>
       </el-col>
@@ -152,7 +161,7 @@ const load = () => {
       search({ skip, limit });
     } else ElMessage({ type: `warning`, message: `已经到底了!` });
   }
-}
+};
 // 返回上一页
 const toBack = () => {
   window.history.go(-1);