ReadMore (加载更多)

展开阅读更多组件用于在内容区域提供一种折叠和展开的功能，允许用户根据需要查看更多或更少的内容。它的功能亮点包括：可自定义展开和收起的提示文本，支持显示或隐藏展开/收起按钮，以及可选的阴影效果。使用场景包括：文章摘要、产品详情、用户评论等，需要在有限空间内展示可扩展内容的情况。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page main-class="p-30" title="展开阅读更多">
		<t-card title="ReadMore" main-class="mb-30"
			sub-title="展开阅读更多组件用于在内容区域提供一种折叠和展开的功能，允许用户根据需要查看更多或更少的内容。它的功能亮点包括：可自定义展开和收起的提示文本，支持显示或隐藏展开/收起按钮，以及可选的阴影效果。使用场景包括：文章摘要、产品详情、用户评论等，需要在有限空间内展示可扩展内容的情况。"></t-card>
		<t-section title="基础使用" type='p' main-class="tdb-tdr-mb-30"></t-section>
		<t-col main-class="tdb tdr mb-30 p-20">
			<t-read-more>
				<rich-text :nodes="content"></rich-text>
			</t-read-more>
		</t-col>
		<t-section title="锁定" type='p' main-class="tdb tdr mb-30"></t-section>
		<t-col main-class="tdb td mb-30 p-30">
			<t-read-more type="p" closeText='开通会员解锁' :disabled="false">
				<rich-text :nodes="content"></rich-text>
			</t-read-more>
		</t-col>
		<t-section title="设置高度" type='p' main-class="tdb tdr mb-30"></t-section>
		<t-col main-class="tdb tdr mb-30 p-30">
			<t-read-more main-class="h-500" type="s">
				<rich-text :nodes="content2"></rich-text>
			</t-read-more>
		</t-col>
	</t-page>
</template>
<script>
	export default {
		data() {
			return {
				content: `<p style="line-height:40px;">在一个遥远的神秘国度，传说中有一把神奇的剑，能够赋予持有者无尽的力量。这把剑被藏在了一个隐秘的山洞中，只有最勇敢的冒险者才能找到它。</p>
<img style="width:100%;height:300px;" src="https://life.yundie.xyz/static/image/3.png" />
	<p style="line-height:40px;">图1: 隐秘山洞的入口</p>
`,
				content1: `
<p style="line-height:40px;">一位年轻的勇士，怀揣着对神秘剑的渴望，踏上了寻找的旅程。他穿过了茂密的森林，越过了险峻的山峰，最终来到了山洞的入口。</p>
<img style="width:100%;height:300px;" src="https://life.yundie.xyz/static/image/2.png" />
	<p style="line-height:40px;">图2: 勇士穿越森林和山峰</p>
`,
				content2: `<p style="line-height:40px;">在山洞的深处，勇士终于发现了那把传说中的神奇剑。他握住剑柄，感受到了一股强大的力量流入体内。从此以后，他成为了神秘国度的守护者，用这把剑保护着人民免受邪恶的侵害。</p>
<img style="width:100%;height:300px;" src="https://life.yundie.xyz/static/image/1.png" />
	<p style="line-height:40px;">图3: 勇士找到神奇剑</p>

`
			};
		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
shadow	Boolean	false	是否显示阴影
openText	String	收起	展开时的提示文字
closeText	String	展开阅读全文	关闭时的提示文字
shadowClass	String	``	阴影的样式

插槽

名称	返回值	说明
default	-