ReadMore 阅读更多

介绍

折叠/展开长文本、富文本，相对于文本省略更具通用性。

基础用法

通过 text 属性设置要展示的文本。

<vd-read-more text="内容内容内容..." />

富文本内容

通过 is-rich 属性来设置是否展示富文本内容。

<vd-read-more text="内容内容内容..." :is-rich="true" />

控制展开

通过 v-model 控制是否展开。

TIP

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

<vd-read-more v-model="expand" :text="text" />

API

Props

参数	说明	类型	默认值
text	文本内容	string	-
v-model	是否展开	boolean	-
height	折叠高度	string | number	120
is-rich	是否以富文本形式渲染	boolean	false
expand-text	展开按钮的文本	string	-
expand-always	是否一直展示展开按钮，不管内容是否超过高度	boolean	false
collapse-text	收起按钮的文本	string	-
collapse-show	是否展示收起按钮	boolean	false

代替原始 Props

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

Events

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

Slots

名称	说明
default	自定义内容
toggle	切换按钮
toggle-text	切换按钮文本
toggle-icon	切换按钮图标