element-plus-x · Chang-Chen · Sep 16, 2025
diff --git a/apps/docs/zh/components/bubbleList/index.md b/apps/docs/zh/components/bubbleList/index.md
@@ -51,6 +51,7 @@ title: 'BubbleList'
 | --------------------- | ---------------------------------------------- | --------------------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `list`                | Array                                          | 是                                      | 无                                             | 包含气泡信息的数组，每个元素为一个对象，包含 `content`、`placement`、`loading`、`shape`、`variant`、`isMarkdown`、`typing` 等 `Bubble` 属性，用于配置每个气泡的显示内容和样式。 |
 | `autoScroll`          | Boolean                                        | 否                                      | true                                           | 是否开启自动滚动。                                                                                                                                                              |
+| `maxWidth`            | String                                         | 否                                      | 'none'                                         | 气泡列表容器的最大宽度，默认值为 `none`。                                                                                                                                       |
 | `maxHeight`           | String                                         | 否                                      | -                                              | 气泡列表list的最大高度(默认继承wrapper容器高度)。                                                                                                                               |
 | `alwaysShowScrollbar` | Boolean                                        | 否                                      | false                                          | 是否一直显示滚动条，默认为 `false`。                                                                                                                                            |
 | `backButtonThreshold` | Number                                         | 否                                      | 80                                             | 返回底部按钮显示阈值，当滚动条距离底部大于该值时，会显示返回底部按钮。                                                                                                          |

diff --git a/packages/core/src/components/BubbleList/index.vue b/packages/core/src/components/BubbleList/index.vue
@@ -10,6 +10,7 @@ import loadingBg from './loading.vue';
 const props = withDefaults(defineProps<BubbleListProps<T>>(), {
   list: () => [] as T[],
   autoScroll: true,
+  maxWidth: 'none',
   maxHeight: '',
   triggerIndices: 'only-last',
   alwaysShowScrollbar: false,
@@ -30,27 +31,11 @@ const TOLERANCE = 30;
 //     maxHeight: props.maxHeight || '100%'
 //   };
 // });
-function initStyle() {
-  document.documentElement.style.setProperty(
-    '--el-bubble-list-max-height',
-    props.maxHeight || '100%'
-  );
-  document.documentElement.style.setProperty(
-    '--el-bubble-list-btn-size',
-    `${props.btnIconSize}px`
-  );
-}
-
-onMounted(() => {
-  initStyle();
-});
-
-watch(
-  () => [props.maxHeight, props.btnIconSize],
-  () => {
-    initStyle();
-  }
-);
+const elBubbleListStyleVars = computed(() => ({
+  '--el-bubble-list-max-width': props.maxWidth,
+  '--el-bubble-list-max-height': props.maxHeight,
+  '--el-bubble-list-btn-size': `${props.btnIconSize}px`
+}));
 
 /* 在底部时候自动滚动 开始 */
 // 滚动容器的引用
@@ -68,7 +53,7 @@ watch(
     if (props.list && props.list.length > 0) {
       nextTick(() => {
         if (props.autoScroll) {
-        // 每次添加新的气泡，等页面渲染后，在执行自动滚动
+          // 每次添加新的气泡，等页面渲染后，在执行自动滚动
           autoScroll();
         }
       });
@@ -103,12 +88,10 @@ function scrollToBottom() {
 // 父组件触发滚动到指定气泡框
 function scrollToBubble(index: number) {
   const container = scrollContainer.value;
-  if (!container)
-    return;
+  if (!container) return;
 
   const bubbles = container.querySelectorAll('.el-bubble');
-  if (index >= bubbles.length)
-    return;
+  if (index >= bubbles.length) return;
 
   stopAutoScrollToBottom.value = true;
   const targetBubble = bubbles[index] as HTMLElement;
@@ -183,7 +166,7 @@ function handleBubbleComplete(index: number, instance: TypewriterInstance) {
       break;
     default:
       props.triggerIndices.includes(index) &&
-      emits('complete', instance, index);
+        emits('complete', instance, index);
       break;
   }
 }
@@ -216,6 +199,7 @@ defineExpose({
     <div
       ref="scrollContainer"
       class="el-bubble-list"
+      :style="elBubbleListStyleVars"
       :class="{ 'always-scrollbar': props.alwaysShowScrollbar }"
       @scroll="handleScroll"
     >

diff --git a/packages/core/src/components/BubbleList/style.scss b/packages/core/src/components/BubbleList/style.scss
@@ -8,6 +8,7 @@
   gap: 16px;
   overflow: auto;
   scroll-behavior: smooth;
+  max-width: var(--el-bubble-list-max-width);
   max-height: var(--el-bubble-list-max-height);
   position: relative;
   /* 默认滚动条样式（透明） */

diff --git a/packages/core/src/components/BubbleList/types.d.ts b/packages/core/src/components/BubbleList/types.d.ts
@@ -14,6 +14,7 @@ export interface BubbleListProps<
 > {
   list: T[];
   autoScroll?: boolean;
+  maxWidth?: string;
   maxHeight?: string;
   triggerIndices?: 'only-last' | 'all' | number[];
   showBackButton?: boolean; // 是否显示 底部按钮

diff --git a/packages/core/src/stories/BubbleList/BubbleList.stories.ts b/packages/core/src/stories/BubbleList/BubbleList.stories.ts
@@ -10,6 +10,7 @@ const meta = {
   tags: ['autodocs'],
   argTypes: {
     autoScroll: { control: 'boolean' },
+    maxWidth: { control: 'text' },
     maxHeight: { control: 'text' },
     triggerIndices: { control: 'object' },
     alwaysShowScrollbar: { control: 'boolean' },
@@ -23,6 +24,7 @@ const meta = {
   args: {
     list: messageArr,
     autoScroll: true,
+    maxWidth: 'none',
     maxHeight: '500px',
     triggerIndices: 'only-last',
     alwaysShowScrollbar: true,