Skip to content

Commit 518f2d4

Browse files
worryzyyworryzyy
committed
docs(docs): 更新 Bubble 和 Typewriter 组件文档，调整属性和方法说明
1 parent 6bb72da commit 518f2d4

File tree

2 files changed

+103
-94
lines changed

2 files changed

+103
-94
lines changed

‎docs/src/components/bubble.md‎

Lines changed: 66 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -12,57 +12,6 @@
1212
- 加载状态显示
1313
- 自定义头像和布局
1414

15-
## 属性
16-
17-
| 参数 | 说明 | 类型 | 默认值 |
18-
| ---- | ---- | ---- | ------ |
19-
| content | 气泡内容文本 | String | '' |
20-
| reasoning_content | 推理内容（备用内容） | String | '' |
21-
| avatar | 头像图片地址 | String | '' |
22-
| placement | 气泡位置，可选值：'start'(左侧)/'end'(右侧) | String | 'start' |
23-
| variant | 气泡样式，可选值：'filled'/'borderless'/'outlined'/'shadow' | String | 'filled' |
24-
| maxWidth | 气泡最大宽度 | String | '500px' |
25-
| avatarSize | 头像尺寸 | String | '' |
26-
| avatarGap | 头像与气泡间距 | String | '12px' |
27-
| avatarShape | 头像形状，可选值：'circle'/'square' | String | 'circle' |
28-
| avatarIcon | 头像图标（当没有头像图片时） | String | '' |
29-
| avatarSrcSet | 头像图片 srcset 属性 | String | '' |
30-
| avatarAlt | 头像图片 alt 属性 | String | '' |
31-
| avatarFit | 头像图片填充方式 | String | 'cover' |
32-
| noStyle | 是否移除默认样式 | Boolean | false |
33-
| typing | 打字效果配置，设为 true 使用默认值或传入对象配置：<br>- interval: 打字间隔(ms)<br>- step: 每次打字字符数<br>- suffix: 光标字符 | Boolean/Object | undefined |
34-
| loading | 是否显示加载状态 | Boolean | false |
35-
| shape | 气泡形状，可选值：''/'round'/'corner' | String | '' |
36-
| isMarkdown | 是否解析 Markdown 内容 | Boolean | false |
37-
| isFog | 是否启用雾化效果 | Boolean | false |
38-
39-
## 方法
40-
41-
| 方法名 | 说明 | 参数 | 返回值 |
42-
|--------|------|------|--------|
43-
| interrupt | 中断打字过程 | - | - |
44-
| continueTyping | 继续被中断的打字 | - | - |
45-
| restart | 重新开始打字 | - | - |
46-
| destroy | 销毁组件实例 | - | - |
47-
48-
## 事件
49-
50-
| 事件名 | 说明 | 回调参数 |
51-
|--------|------|----------|
52-
| start | 打字开始事件 | 组件实例 |
53-
| writing | 打字进行事件 | 组件实例 |
54-
| finish | 打字完成事件 | 组件实例 |
55-
| avatarError | 头像加载错误事件 | 错误对象 |
56-
57-
## 插槽
58-
59-
| 插槽名 | 说明 |
60-
|--------|------|
61-
| avatar | 自定义头像内容 |
62-
| header | 自定义气泡头部内容 |
63-
| content | 自定义气泡主体内容 |
64-
| footer | 自定义气泡底部内容 |
65-
| loading | 自定义加载状态内容 |
6615

6716
## 使用示例
6817

@@ -105,7 +54,8 @@
10554
content="默认填充样式 (filled)"
10655
variant="filled"
10756
placement="start"
108-
avatarSize="40px"
57+
:avatarSize="40"
58+
avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
10959
/>
11060
</div>
11161
@@ -114,7 +64,8 @@
11464
content="带边框样式 (borderless)"
11565
variant="borderless"
11666
placement="start"
117-
avatarSize="40px"
67+
:avatarSize="40"
68+
avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
11869
/>
11970
</div>
12071
@@ -123,7 +74,8 @@
12374
content="轮廓样式 (outlined)"
12475
variant="outlined"
12576
placement="start"
126-
avatarSize="40px"
77+
:avatarSize="40"
78+
avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
12779
/>
12880
</div>
12981
@@ -132,7 +84,8 @@
13284
content="阴影样式 (shadow)"
13385
variant="shadow"
13486
placement="start"
135-
avatarSize="40px"
87+
:avatarSize="40"
88+
avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
13689
/>
13790
</div>
13891
@@ -141,7 +94,8 @@
14194
content="圆角样式 (shape='round')"
14295
shape="round"
14396
placement="start"
144-
avatarSize="40px"
97+
:avatarSize="40"
98+
avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
14599
/>
146100
</div>
147101
@@ -150,7 +104,8 @@
150104
content="尖角样式 (shape='corner')"
151105
shape="corner"
152106
placement="start"
153-
avatarSize="40px"
107+
:avatarSize="40"
108+
avatar="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
154109
/>
155110
</div>
156111
</div>
@@ -268,15 +223,15 @@ export default {
268223
<el-x-bubble
269224
loading
270225
placement="start"
271-
avatarSize="40px"
226+
:avatarSize="40"
272227
/>
273228
</div>
274229
275230
<div class="bubble-row">
276231
<el-x-bubble
277232
loading
278233
placement="end"
279-
avatarSize="40px"
234+
:avatarSize="40"
280235
>
281236
<template #loading>
282237
<el-icon class="is-loading"><loading /></el-icon>
@@ -469,3 +424,55 @@ npm i element-ui -S
469424
</style>
470425
```
471426
:::
427+
428+
## 属性
429+
430+
| 参数 | 说明 | 类型 | 默认值 |
431+
| ---- | ---- | ---- | ------ |
432+
| content | 气泡内容文本 | String | '' |
433+
| reasoning_content | 推理内容（备用内容） | String | '' |
434+
| avatar | 头像图片地址 | String | '' |
435+
| placement | 气泡位置，可选值：'start'(左侧)/'end'(右侧) | String | 'start' |
436+
| variant | 气泡样式，可选值：'filled'/'borderless'/'outlined'/'shadow' | String | 'filled' |
437+
| maxWidth | 气泡最大宽度 | String | '500px' |
438+
| avatarSize | 头像尺寸 | String | '' |
439+
| avatarGap | 头像与气泡间距 | String | '12px' |
440+
| avatarShape | 头像形状，可选值：'circle'/'square' | String | 'circle' |
441+
| avatarIcon | 头像图标（当没有头像图片时） | String | '' |
442+
| avatarSrcSet | 头像图片 srcset 属性 | String | '' |
443+
| avatarAlt | 头像图片 alt 属性 | String | '' |
444+
| avatarFit | 头像图片填充方式 | String | 'cover' |
445+
| noStyle | 是否移除默认样式 | Boolean | false |
446+
| typing | 打字效果配置，设为 true 使用默认值或传入对象配置：<br>- interval: 打字间隔(ms)<br>- step: 每次打字字符数<br>- suffix: 光标字符 | Boolean/Object | undefined |
447+
| loading | 是否显示加载状态 | Boolean | false |
448+
| shape | 气泡形状，可选值：''/'round'/'corner' | String | '' |
449+
| isMarkdown | 是否解析 Markdown 内容 | Boolean | false |
450+
| isFog | 是否启用雾化效果 | Boolean | false |
451+
452+
## 方法
453+
454+
| 方法名 | 说明 | 参数 | 返回值 |
455+
|--------|------|------|--------|
456+
| interrupt | 中断打字过程 | - | - |
457+
| continueTyping | 继续被中断的打字 | - | - |
458+
| restart | 重新开始打字 | - | - |
459+
| destroy | 销毁组件实例 | - | - |
460+
461+
## 事件
462+
463+
| 事件名 | 说明 | 回调参数 |
464+
|--------|------|----------|
465+
| start | 打字开始事件 | 组件实例 |
466+
| writing | 打字进行事件 | 组件实例 |
467+
| finish | 打字完成事件 | 组件实例 |
468+
| avatarError | 头像加载错误事件 | 错误对象 |
469+
470+
## 插槽
471+
472+
| 插槽名 | 说明 |
473+
|--------|------|
474+
| avatar | 自定义头像内容 |
475+
| header | 自定义气泡头部内容 |
476+
| content | 自定义气泡主体内容 |
477+
| footer | 自定义气泡底部内容 |
478+
| loading | 自定义加载状态内容 |

‎docs/src/components/typewriter.md‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -12,41 +12,6 @@
1212
- 光标雾化效果
1313
- 插件系统扩展
1414

15-
## 属性
16-
17-
| 参数 | 说明 | 类型 | 默认值 |
18-
| ---------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------- | ------ |
19-
| content | 要显示的内容 | String | '' |
20-
| isMarkdown | 是否解析 Markdown 内容 | Boolean | false |
21-
| typing | 打字效果配置，设为 true 使用默认值或传入对象配置：<br>- interval: 打字间隔(ms)<br>- step: 每次打字字符数<br>- suffix: 光标字符 | Boolean/Object | false |
22-
| isFog | 雾化效果配置，设为 true 使用默认值或传入对象配置：<br>- bgColor: 背景色<br>- width: 雾化宽度 | Boolean/Object | false |
23-
| highlight | 自定义代码高亮函数，接收(code, lang)参数 | Function | - |
24-
| mdPlugins | Markdown 插件数组 | Array | - |
25-
26-
27-
28-
## 方法
29-
30-
| 方法名 | 说明 | 参数 | 返回值 |
31-
|---------|------|------|-------|
32-
| startTyping | 开始打字动画 | - | - |
33-
| finishTyping | 立即完成打字 | - | - |
34-
| interrupt | 中断打字过程 | - | - |
35-
| continueTyping | 继续被中断的打字 | - | - |
36-
| restart | 重新开始打字 | - | - |
37-
| destroy | 销毁组件实例 | - | - |
38-
| getInstance | 获取组件实例 API | - | 对象，包含：<br>- interrupt/continue/restart/destroy: 控制方法<br>- renderedContent: 渲染内容<br>- isTyping: 是否正在打字<br>- progress: 当前进度 |
39-
40-
## 事件
41-
42-
| 事件名 | 说明 | 回调参数 |
43-
|---------|------|--------|
44-
| start | 打字开始事件 | 无参数 |
45-
| writing | 打字进行事件 | 对象，包含：<br>- progress: 当前进度<br>- renderedContent: 已渲染内容 |
46-
| finish | 打字完成事件 | getInstance()返回的对象 |
47-
| interrupt | 打字中断事件 | getInstance()返回的对象 |
48-
| continue | 打字继续事件 | getInstance()返回的对象 |
49-
| restart | 打字重新开始事件 | getInstance()返回的对象 |
5015

5116
## 使用示例
5217

@@ -630,3 +595,40 @@ function demo() {
630595
</script>
631596
```
632597
:::
598+
599+
600+
## 属性
601+
602+
| 参数 | 说明 | 类型 | 默认值 |
603+
| ---------- | ------------------------------------------------------------------------------------------------------------------------------ | -------------- | ------ |
604+
| content | 要显示的内容 | String | '' |
605+
| isMarkdown | 是否解析 Markdown 内容 | Boolean | false |
606+
| typing | 打字效果配置，设为 true 使用默认值或传入对象配置：<br>- interval: 打字间隔(ms)<br>- step: 每次打字字符数<br>- suffix: 光标字符 | Boolean/Object | false |
607+
| isFog | 雾化效果配置，设为 true 使用默认值或传入对象配置：<br>- bgColor: 背景色<br>- width: 雾化宽度 | Boolean/Object | false |
608+
| highlight | 自定义代码高亮函数，接收(code, lang)参数 | Function | - |
609+
| mdPlugins | Markdown 插件数组 | Array | - |
610+
611+
612+
613+
## 方法
614+
615+
| 方法名 | 说明 | 参数 | 返回值 |
616+
|---------|------|------|-------|
617+
| startTyping | 开始打字动画 | - | - |
618+
| finishTyping | 立即完成打字 | - | - |
619+
| interrupt | 中断打字过程 | - | - |
620+
| continueTyping | 继续被中断的打字 | - | - |
621+
| restart | 重新开始打字 | - | - |
622+
| destroy | 销毁组件实例 | - | - |
623+
| getInstance | 获取组件实例 API | - | 对象，包含：<br>- interrupt/continue/restart/destroy: 控制方法<br>- renderedContent: 渲染内容<br>- isTyping: 是否正在打字<br>- progress: 当前进度 |
624+
625+
## 事件
626+
627+
| 事件名 | 说明 | 回调参数 |
628+
|---------|------|--------|
629+
| start | 打字开始事件 | 无参数 |
630+
| writing | 打字进行事件 | 对象，包含：<br>- progress: 当前进度<br>- renderedContent: 已渲染内容 |
631+
| finish | 打字完成事件 | getInstance()返回的对象 |
632+
| interrupt | 打字中断事件 | getInstance()返回的对象 |
633+
| continue | 打字继续事件 | getInstance()返回的对象 |
634+
| restart | 打字重新开始事件 | getInstance()返回的对象 |

0 commit comments

Comments
 (0)