文本省略 Ellipsis
默认按单行省略处理,适合表格单元格、列表标题等横向空间有限的场景。
通过 line-clamp 指定最大展示行数,超出部分将按多行截断。
通过 expand-trigger="click" 开启点击展开与收起。关闭 tooltip 后,会退回到原生 title 提示。
自定义提示内容
Section titled “自定义提示内容”tooltip 属性可传入 Tooltip 配置,tooltip 插槽可自定义完整提示内容。
sd-performant-ellipsis 适合大量列表项同时渲染的场景。它会先以纯 CSS 省略形式输出,等用户真正交互后再切换到完整的 sd-ellipsis 能力,因此首屏渲染开销更低,但内部节点会在激活时重新挂载。
从 Naive UI 迁移
Section titled “从 Naive UI 迁移”如果你正在把 naive-ui 的 NEllipsis 或 NPerformantEllipsis 迁移到当前组件库,可以直接参考 guides/naive-ui-migration.mdx。
当前这次迁移已经对齐了以下能力:
- 单行省略与多行省略
- 点击展开
tooltip插槽自定义提示内容- 高性能渲染版本
sd-performant-ellipsis
常见替换关系如下:
| Naive UI | SD Design Vue |
|---|---|
n-ellipsis | sd-ellipsis |
n-performant-ellipsis | sd-performant-ellipsis |
如果业务代码里需要显式导入组件,也可以直接导入 Ellipsis 和 PerformantEllipsis 组件使用。
<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 | 自定义提示内容 | - |