docs(@vben/docs): sync component docs with current APIs

This commit is contained in:
xingyu4j
2026-03-14 21:34:48 +08:00
parent 6c274b75b8
commit 6b3bcee582
21 changed files with 937 additions and 283 deletions

View File

@@ -4,31 +4,31 @@ outline: deep
# Vben EllipsisText 省略文本
框架提供的文本展示组件,可配置超长省略、tooltip提示展开收起等功能
`EllipsisText` 用于展示超长文本,支持省略、Tooltip 提示以及点击展开收起。
> 如果文档内没有参数说明,可以尝试在在线示例内寻找
> 如果文档内没有覆盖到你需要的细节,可以结合在线示例一起查看。
## 基础用法
通过默认插槽设置文本内容,`maxWidth`属性设置最大宽度。
通过默认插槽提供文本内容,`maxWidth` 用于限制文本区域宽度。
<DemoPreview dir="demos/vben-ellipsis-text/line" />
## 可折叠文本
## 可折叠文本
通过`line`设置折叠后的行数,`expand`属性设置是否支持展开收起。
通过 `line` 设置折叠后的最大行数,通过 `expand` 开启点击展开收起。
<DemoPreview dir="demos/vben-ellipsis-text/expand" />
## 自定义提示浮层
通过名为`tooltip`插槽定制提示信息
通过 `tooltip` 插槽自定义提示内容
<DemoPreview dir="demos/vben-ellipsis-text/tooltip" />
## 自动显示 tooltip
## 仅在省略时显示 Tooltip
通过`tooltip-when-ellipsis`设置,仅在文本长度超出导致省略号出现时才触发 tooltip。
通过 `tooltip-when-ellipsis` 控制仅在文本被截断时显示 Tooltip。
<DemoPreview dir="demos/vben-ellipsis-text/auto-display" />
@@ -38,27 +38,27 @@ outline: deep
| 属性名 | 描述 | 类型 | 默认值 |
| --- | --- | --- | --- |
| expand | 支持点击展开或收起 | `boolean` | `false` |
| line | 文本最大行数 | `number` | `1` |
| expand | 是否支持点击展开或收起 | `boolean` | `false` |
| line | 文本最大显示行数 | `number` | `1` |
| maxWidth | 文本区域最大宽度 | `number \| string` | `'100%'` |
| placement | 提示浮层位置 | `'bottom'\|'left'\|'right'\|'top'` | `'top'` |
| tooltip | 启用文本提示 | `boolean` | `true` |
| tooltipWhenEllipsis | 内容超出,自动启用文本提示 | `boolean` | `false` |
| ellipsisThreshold | 设置 tooltipWhenEllipsis 后才生效,文本截断检测的像素差异阈值,越大则判断越严格,如果碰见异常情况可以自己设置阈值 | `number` | `3` |
| tooltipBackgroundColor | 提示文本的背景色 | `string` | - |
| tooltipColor | 提示文本的颜色 | `string` | - |
| tooltipFontSize | 提示文本的大小 | `string` | - |
| tooltipMaxWidth | 提示浮层的最大宽度。如不设置则保持与文本宽度一致 | `number` | - |
| tooltipOverlayStyle | 提示内容区域样式 | `CSSProperties` | `{ textAlign: 'justify' }` |
| placement | 提示浮层位置 | `'bottom' \| 'left' \| 'right' \| 'top'` | `'top'` |
| tooltip | 是否启用文本提示 | `boolean` | `true` |
| tooltipWhenEllipsis | 是否仅在文本被截断时显示提示 | `boolean` | `false` |
| ellipsisThreshold | 文本截断检测阈值,越大判定越严格 | `number` | `3` |
| tooltipBackgroundColor | 提示背景色 | `string` | `''` |
| tooltipColor | 提示文颜色 | `string` | `''` |
| tooltipFontSize | 提示文字大小,单位 `px` | `number` | `14` |
| tooltipMaxWidth | 提示内容最大宽度,单位 `px` | `number` | - |
| tooltipOverlayStyle | 提示内容区域样式 | `CSSProperties` | `{ textAlign: 'justify' }` |
### Events
| 事件名 | 描述 | 类型 |
| ------------ | ------------ | -------------------------- |
| expandChange | 展开状态变 | `(isExpand:boolean)=>void` |
| 事件名 | 描述 | 类型 |
| ------------ | ------------------ | ----------------------------- |
| expandChange | 展开状态变化时触发 | `(isExpand: boolean) => void` |
### Slots
| 插槽名 | 描述 |
| ------- | -------------------------------- |
| tooltip | 启文本提示时,用来定制提示内容 |
| 插槽名 | 描述 |
| ------- | ---------------------------------- |
| tooltip | 启文本提示时,用于自定义提示内容 |