From c60879fdfd0d9c982aa2bb72778e87ccad723c2e Mon Sep 17 00:00:00 2001 From: zhangzhen Date: Tue, 16 Sep 2025 13:09:56 +0800 Subject: [PATCH] =?UTF-8?q?fix(BubbleList):=20bubbleList=20=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E6=B7=BB=E5=8A=A0=E6=B7=BB=E5=8A=A0=20maxWidth=20?= =?UTF-8?q?=E5=B1=9E=E6=80=A7=20fix:=20#226?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closed #226 --- apps/docs/zh/components/bubbleList/index.md | 1 + .../core/src/components/BubbleList/index.vue | 38 ++++++------------- .../core/src/components/BubbleList/style.scss | 1 + .../core/src/components/BubbleList/types.d.ts | 1 + .../stories/BubbleList/BubbleList.stories.ts | 2 + 5 files changed, 16 insertions(+), 27 deletions(-) diff --git a/apps/docs/zh/components/bubbleList/index.md b/apps/docs/zh/components/bubbleList/index.md index 0879743a..81c1e017 100644 --- 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 index f5953fde..fe211fcb 100644 --- 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>(), { 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({
diff --git a/packages/core/src/components/BubbleList/style.scss b/packages/core/src/components/BubbleList/style.scss index d100024b..1ac3567e 100644 --- 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 index bc437c5b..b24abffd 100644 --- 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 index e423f1ca..c74f6860 100644 --- 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,