From 7c2d66c510ce94a36d4691ca33fbc6ac7aec9cb6 Mon Sep 17 00:00:00 2001
From: wumo1016 <760478279@qq.com>
Date: Tue, 15 Jul 2025 22:29:58 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20[BubbleList]=20=E5=BC=95=E7=94=A8?=
 =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E7=B1=BB=E5=9E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/docs/components/bubbleList/demos/scroll-to.vue |  9 +++++----
 packages/core/src/stories/BubbleList/CustomSolt.vue | 13 ++++++++-----
 packages/core/src/stories/BubbleList/index.vue      | 13 ++++++++-----
 3 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/apps/docs/components/bubbleList/demos/scroll-to.vue b/apps/docs/components/bubbleList/demos/scroll-to.vue
index 0d979d56..528aaaab 100644
--- a/apps/docs/components/bubbleList/demos/scroll-to.vue
+++ b/apps/docs/components/bubbleList/demos/scroll-to.vue
@@ -14,6 +14,7 @@ title: 自动滚动 + 滚动到指定索引
 
 <script setup lang="ts">
 import type {
+  BubbleListInstance,
   BubbleListItemProps,
   BubbleListProps
 } from 'vue-element-plus-x/types/BubbleList';
@@ -66,7 +67,7 @@ function generateFakeItems(count: number): listType[] {
   return messages;
 }
 
-const bubbleListRef = ref();
+const bubbleListRef = ref<BubbleListInstance | null>(null);
 const num = ref(0);
 
 function addMessage() {
@@ -106,15 +107,15 @@ function clearMessage() {
 }
 
 function scrollToTop() {
-  bubbleListRef.value.scrollToTop();
+  bubbleListRef.value?.scrollToTop();
 }
 
 function scrollBottom() {
-  bubbleListRef.value.scrollToBottom();
+  bubbleListRef.value?.scrollToBottom();
 }
 
 function scrollToBubble() {
-  bubbleListRef.value.scrollToBubble(num.value);
+  bubbleListRef.value?.scrollToBubble(num.value);
 }
 
 onMounted(() => {
diff --git a/packages/core/src/stories/BubbleList/CustomSolt.vue b/packages/core/src/stories/BubbleList/CustomSolt.vue
index 1654d9c7..0f5c2a1e 100644
--- a/packages/core/src/stories/BubbleList/CustomSolt.vue
+++ b/packages/core/src/stories/BubbleList/CustomSolt.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { MessageItem } from '@assets/mock';
-import type { BubbleListProps } from '@components/BubbleList/types';
+import type {
+  BubbleListInstance,
+  BubbleListProps
+} from '@components/BubbleList/types';
 import { avatar1, avatar2 } from '@assets/mock';
 import BubbleList from '@components/BubbleList/index.vue';
 import { DocumentCopy, Refresh, Search, Star } from '@element-plus/icons-vue';
@@ -12,7 +15,7 @@ const bubbleItems = ref<BubbleListProps<MessageItem>['list']>(
   props.list as BubbleListProps<MessageItem>['list']
 );
 
-const bubbleListRef = ref();
+const bubbleListRef = ref<BubbleListInstance | null>(null);
 const num = ref(0);
 
 function addMessage() {
@@ -34,7 +37,7 @@ function addMessage() {
     avatarSize: '32px'
   };
   bubbleItems.value.push(obj as MessageItem);
-  bubbleListRef.value.scrollToBottom();
+  bubbleListRef.value?.scrollToBottom();
   ElMessage.success(`条数：${bubbleItems.value.length}`);
 }
 
@@ -43,11 +46,11 @@ function handleOnComplete(_self: unknown) {
 }
 
 function scrollToTop() {
-  bubbleListRef.value.scrollToTop();
+  bubbleListRef.value?.scrollToTop();
 }
 
 function scrollToBubble() {
-  bubbleListRef.value.scrollToBubble(num.value);
+  bubbleListRef.value?.scrollToBubble(num.value);
 }
 
 onMounted(() => {
diff --git a/packages/core/src/stories/BubbleList/index.vue b/packages/core/src/stories/BubbleList/index.vue
index f86f200d..0c94a68d 100644
--- a/packages/core/src/stories/BubbleList/index.vue
+++ b/packages/core/src/stories/BubbleList/index.vue
@@ -1,6 +1,9 @@
 <script setup lang="ts">
 import type { MessageItem } from '@assets/mock';
-import type { BubbleListProps } from '@components/BubbleList/types';
+import type {
+  BubbleListInstance,
+  BubbleListProps
+} from '@components/BubbleList/types';
 import { avatar1, avatar2 } from '@assets/mock';
 import BubbleList from '@components/BubbleList/index.vue';
 import { ElMessage } from 'element-plus';
@@ -11,7 +14,7 @@ const bubbleItems = ref<BubbleListProps<MessageItem>['list']>(
   props.list as BubbleListProps<MessageItem>['list']
 );
 
-const bubbleListRef = ref();
+const bubbleListRef = ref<BubbleListInstance | null>(null);
 const num = ref(0);
 
 function addMessage() {
@@ -33,7 +36,7 @@ function addMessage() {
     avatarSize: '32px'
   };
   bubbleItems.value.push(obj as MessageItem);
-  bubbleListRef.value.scrollToBottom();
+  bubbleListRef.value?.scrollToBottom();
   ElMessage.success(`条数：${bubbleItems.value.length}`);
 }
 
@@ -42,11 +45,11 @@ function handleOnComplete(_self: unknown) {
 }
 
 function scrollToTop() {
-  bubbleListRef.value.scrollToTop();
+  bubbleListRef.value?.scrollToTop();
 }
 
 function scrollToBubble() {
-  bubbleListRef.value.scrollToBubble(num.value);
+  bubbleListRef.value?.scrollToBubble(num.value);
 }
 
 onMounted(() => {