TextEllipsis 文本省略容器
TIP
一般是用于文本省略,并且需要文本省略时需要提示,不省略时不需要提示的时候使用,增强了文本省略的功能
组件引入:import { TextEllipsis } from @wetspace/pro-components
基本使用
多行省略
要保留几行,通过rows
设置
配置tooltip属性
这里的配置是继承的 ElTooltip
控制tooltip最大宽度
这里扩展了ElTooltip
的配置,增加了一个maxWidth
注意事项
- 本组件是文本容器,请勿直接在外层非span容器进行包裹,例如:
<TextEllipsis><div>需要省略的文本</div></TextEllipsis>
这样使用是错误的,本质上div等这些容器不属于文本,因此这样使用会导致无法精确计算,无法做到文本省略时提供提示,不省略不提供提示 - 该组件是根据外部容器的大小进行的一个宽度,高度识别,进行是否文本省略逻辑,因此在使用一些封装好的组件的时候也请加上div容器,进行宽度,高度大小限制
- 不建议直接在本组件上做
padding
,margin
,position
这些css样式改动
属性
属性 | 描述 | 类型 | 默许值 |
---|---|---|---|
tooltip | 提示配置 | Partial<ElTooltipProps & { maxWidth:number }> | - |
rows | 保留行数 | number | 1 |