Ellipsis 文字省略

用于长文本/内容的省略。

基础用法

maxLines 设置几行省略，默认是1行。

查看代码

<template>
	<demo-container>
		<gov-ellipsis maxLines="2">
			{{ content }}
		</gov-ellipsis>
	</demo-container>
</template>

<script setup>
const content = Array.from({ length: 20 }, () => "鼠标点击文本查看").join("；");
</script>

Fold 模式

fold 模式展开按钮在下方，foldHeight 可以设置折叠状态下的显示高度。内容不局限文本。

查看代码

<template>
	<demo-container>
		<gov-ellipsis fold> {{ content }}</gov-ellipsis>
	</demo-container>
</template>

<script setup>
const content = Array.from(
	{ length: 20 },
	() => "文字是人类用符号记录表达信息以传之久远的方式和工具，",
).join("");
</script>

隐藏收起

fold 模式下，可设置 hideFoldup 隐藏收起按钮，通常用于文章内容页。

查看代码

<template>
	<demo-container>
		<gov-ellipsis fold hideFoldup> {{ content }}</gov-ellipsis>
	</demo-container>
</template>

<script setup>
const content = Array.from(
	{ length: 20 },
	() => "文字是人类用符号记录表达信息以传之久远的方式和工具，",
).join("");
</script>

Attributes

属性名	说明	类型	可选值	默认值
maxLines	显示的最大行数	Number | String	—	1
fold	是否为折叠模式	Boolean	true, false	false
foldHeight	折叠下的高度，单位px	Number | String	—	100
hideFoldup	是否隐藏收起按钮	Boolean	true, false	false

Slots

插槽名	说明
default	用于放置需要折叠或展开的文本内容，可以放置任何自定义的内容，例如文本或 HTML 结构。

Events

事件名	说明	回调参数
toggle	(折叠/展开)切换事件。	(value: boolean)