feat: ellipsis text automatically displays tooltip based on ellipsis (#6244 )

* feat: ellipsis text automatically displays tooltip based on ellipsis

* feat: ellipsis text automatically displays tooltip based on ellipsis

---------

Co-authored-by: sqchen <9110848@qq.com>
Co-authored-by: sqchen <chenshiqi@sshlx.com>

2025-05-23 15:20:38 +08:00

2.3 KiB

Raw Blame History

outline
deep

Vben EllipsisText 省略文本

框架提供的文本展示组件，可配置超长省略、tooltip提示、展开收起等功能。

如果文档内没有参数说明，可以尝试在在线示例内寻找

基础用法

通过默认插槽设置文本内容，maxWidth属性设置最大宽度。

可折叠的文本块

通过line设置折叠后的行数，expand属性设置是否支持展开收起。

自定义提示浮层

通过名为tooltip的插槽定制提示信息。

通过tooltip-when-ellipsis设置，仅在文本长度超出导致省略号出现时才触发 tooltip。

API

Props

属性名	描述	类型	默认值
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' }`

Events

事件名	描述	类型
expandChange	展开状态改变	`(isExpand:boolean)=>void`

Slots

插槽名	描述
tooltip	启用文本提示时，用来定制提示内容

2.3 KiB Raw Blame History Unescape Escape