feat(chat):收到消息会滚动到最下面

li1553770945 · Nov 24, 2024 · 59c4004 · 59c4004
1 parent fa0a320
commit 59c4004
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 1 deletion.
diff --git a/components.d.ts b/components.d.ts
@@ -16,7 +16,9 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElDivider: typeof import('element-plus/es')['ElDivider']
     ElFooter: typeof import('element-plus/es')['ElFooter']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
@@ -25,12 +27,19 @@ declare module '@vue/runtime-core' {
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRate: typeof import('element-plus/es')['ElRate']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
+    ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     HeaderRoomControls: typeof import('./src/components/chat/headerRoomControls.vue')['default']

diff --git a/src/components/chat/messageDisplay.vue b/src/components/chat/messageDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-scrollbar class="message-box" height="50vh">
+  <el-scrollbar ref="scrollbarRef" class="message-box" height="50vh">
     <div>
       <div
         v-for="msg in messages"
@@ -14,8 +14,30 @@
 
 <script setup>
 import { useMessageStore } from "../../store/messageStore";
+import { nextTick, ref } from "vue";
 
 const { messages } = useMessageStore();
+const scrollbarRef = ref(null);
+
+// 监听消息列表的变化并滚动到最新消息
+const scrollToBottom = () => {
+  nextTick(() => {
+    if (scrollbarRef.value) {
+      const scrollEl = scrollbarRef.value.$el.querySelector('.el-scrollbar__wrap');
+      scrollEl.scrollTop = scrollEl.scrollHeight;
+    }
+  });
+};
+
+// 自动监听 messages 数组变化（通过 watch）
+import { watch } from "vue";
+watch(
+  messages,
+  () => {
+    scrollToBottom();
+  },
+  { deep: true } // 确保深度监听
+);
 </script>
 
 <style scoped>