文本省略 Ellipsis
默认按单行省略处理,适合表格单元格、列表标题等横向空间有限的场景。
通过 line-clamp 指定最大展示行数,超出部分将按多行截断。
通过 expand-trigger="click" 开启点击展开与收起。关闭 tooltip 后,会退回到原生 title 提示。
自定义提示内容
Section titled “自定义提示内容”tooltip 属性可传入 Tooltip 配置,tooltip 插槽可自定义完整提示内容。
sd-performant-ellipsis 适合大量列表项同时渲染的场景。它会先以纯 CSS 省略形式输出,等用户真正交互后再切换到完整的 sd-ellipsis 能力,因此首屏渲染开销更低,但内部节点会在激活时重新挂载。
<ellipsis> / <performant-ellipsis> Props
Section titled “<ellipsis> / <performant-ellipsis> Props”| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| line-clamp | 最大显示行数。不传时为单行省略 | number | string |
- |
| expand-trigger | 展开的触发方式 | 'click' |
- |
| tooltip | 省略时是否展示提示。可传入 Tooltip 属性 | boolean | EllipsisTooltipProps |
true |
<ellipsis> / <performant-ellipsis> Slots
Section titled “<ellipsis> / <performant-ellipsis> Slots”| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 默认内容 | - |
| tooltip | 自定义提示内容 | - |