Skip to content

ReadMore 展开更多

"展开更多"组件允许用户通过点击来展开或收起文本内容,适用于需要控制文本显示长度的场景。

支持平台

安卓iosweb微信小程序支付宝小程序QQ小程序
xxx

示例

html
<template>
	<t-page class="p.30" title="展开阅读更多">
		<t-card title="ReadMore" class="mb.30"
			sub-title="展开阅读更多组件用于在内容区域提供一种折叠和展开的功能,允许用户根据需要查看更多或更少的内容。它的功能亮点包括:可自定义展开和收起的提示文本,支持显示或隐藏展开/收起按钮,以及可选的阴影效果。使用场景包括:文章摘要、产品详情、用户评论等,需要在有限空间内展示可扩展内容的情况。"></t-card>
		<t-section title="基础使用" type='p' class="tdb-tdr-mb.10"></t-section>
		<t-col 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' class="tdb-tdr-mb.10"></t-section>
		<t-col class="tdb-tdr-mb.30-p.30">
			<t-read-more :disabled='true' closeText='开通会员解锁'>
				<rich-text :nodes="content"></rich-text>
			</t-read-more>
		</t-col>
		<t-section title="设置高度" type='p' class="tdb-tdr-mb.10"></t-section>
		<t-col class="tdb-tdr-mb.30-p.30">
			<t-read-more class="h.500">
				<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>

Props

名称描述类型默认值
toggle是否显示"收起"按钮Booleantrue
closeText关闭时的提示文字String'展开阅读全文'
openText展开时的提示文字String'收起'
shadow是否显示阴影Booleanfalse
shadowStyle阴影的样式String'linear-gradient(to top, #ffffff, rgba(255, 255, 255, 0.3))'