Skip to content

Vben EllipsisText 省略文本

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

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

基础用法

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

可折叠的文本块

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

自定义提示浮层

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

自动显示 tooltip

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

API

Props

属性名描述类型默认值
expand支持点击展开或收起booleanfalse
line文本最大行数number1
maxWidth文本区域最大宽度number | string'100%'
placement提示浮层的位置'bottom'|'left'|'right'|'top''top'
tooltip启用文本提示booleantrue
tooltipWhenEllipsis内容超出,自动启用文本提示booleanfalse
ellipsisThreshold设置 tooltipWhenEllipsis 后才生效,文本截断检测的像素差异阈值,越大则判断越严格,如果碰见异常情况可以自己设置阈值number3
tooltipBackgroundColor提示文本的背景颜色string-
tooltipColor提示文本的颜色string-
tooltipFontSize提示文本的大小string-
tooltipMaxWidth提示浮层的最大宽度。如不设置则保持与文本宽度一致number-
tooltipOverlayStyle提示框内容区域样式CSSProperties{ textAlign: 'justify' }

Events

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

Slots

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

贡献者

The avatar of contributor named as sqchen sqchen
The avatar of contributor named as panda7 panda7
The avatar of contributor named as Netfan Netfan

页面历史

基于 MIT 许可发布.