Ellipsis 文本省略

介绍

按行数省略文本内容，超出时可展开或收起。仅支持纯文本，富文本折叠可使用 ReadMore 阅读更多。

基础用法

通过 text 属性设置要展示的文本，默认为单行省略。

<vd-ellipsis text="内容内容内容..." />

多行省略

通过 rows 属性设置折叠时的最大行数。

<vd-ellipsis :text="text" :rows="3" />

省略开头

通过 position="start" 省略开头文本，保留末尾内容。

<vd-ellipsis :text="text" :rows="2" position="start" />

省略中间

通过 position="middle" 省略中间文本，保留首尾内容。

<vd-ellipsis :text="text" :rows="2" position="middle" />

自定义文案

通过 dots、expand-text、collapse-text 属性设置省略符与操作文案，未设置时使用语言包文案。

<vd-ellipsis
  :text="text"
  :rows="2"
  dots="……"
  expand-text="查看更多"
  collapse-text="收起内容"
/>

仅省略

expandable 设置为 false 时只做省略，不展示展开操作。

<vd-ellipsis :text="text" :expandable="false" />

控制展开

通过 v-model 控制是否展开。文本未超出 rows 行数时不会展示操作，change 事件也不会触发。

TIP

未传入该值时展开状态由组件内部维护；传入后进入受控模式，必须由 v-model 同步状态，只写 :model-value 而不监听 update:model-value 时点击切换不会生效。

<vd-ellipsis v-model="expand" :text="text" :rows="2" />

API

Props

参数	说明	类型	默认值
text	文本内容	string	-
rows	折叠时的最大行数	string | number	1
position	省略位置，可选值为 start middle；start 省略开头文本，middle 省略中间文本	string	end
dots	省略符	string	...
expandable	是否支持展开收起	boolean	true
expand-text	展开操作文案	string	语言包 ellipsis.expandText
collapse-text	收起操作文案	string	语言包 ellipsis.collapseText
v-model	是否展开	boolean	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	展开/收起时触发	boolean

Slots

名称	说明	作用域参数
action	展开/收起操作	expand: boolean、toggle: (value?: boolean) => void

Expose

方法名	说明	参数	返回值
update	重新测量并计算省略位置，需要时可手动调用	-	Promise<void>
toggle	切换展开状态，不传参数时取反	value?: boolean	-