# t-read-more

ReadMore 展开更多

t-read-more 组件介绍

t-read-more 是展开阅读更多组件，用于在内容区域提供折叠和展开功能，允许用户根据需要查看更多或更少的内容。

t-read-more 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-read-more 基础用法

基础用法参考 demo/read-more/read-more.uvue，将需要折叠的内容放在默认插槽中。

<template>
	<view class="p-15">
		<tui-theme-switch></tui-theme-switch>
		<t-card title="ReadMore"
				class="mb-15"
				sub-title=""></t-card>
		<t-section title="基础使用"
				   type='primary'
				   class="r-10 mb-15"></t-section>
		<view :class="[`tvg r-10 mb-15 p-10`]">
			<t-read-more>
				<rich-text :class="[`ttc-`]"
						   :nodes="content"
						   mode="native"></rich-text>
			</t-read-more>
		</view>
		<t-section title="锁定"
				   type='primary'
				   class="r-10 mb-15"></t-section>
		<view :class="[`tvg td mb-15 p-15`]">
			<t-read-more type="primary"
						 closeText='开通会员解锁'
						 :disabled="true">
				<rich-text :class="[`ttc-`]"
						   :nodes="content"
						   mode="native"></rich-text>
			</t-read-more>
		</view>
		<t-section title="设置高度"
				   type='primary'
				   class="r-10 mb-15"></t-section>
		<view :class="[`tvg r-10 mb-15 p-15`]">
			<t-read-more shadow-box-class="h-250"
						 type="success">
				<rich-text :class="[`ttc-`]"
						   :nodes="content2"
						   mode="native"></rich-text>
			</t-read-more>
		</view>
	</view>
</template>
<script setup>
	const content = ref(`<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>
	`)
	const content1 = ref(`
	<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>
	`)
	const content2 = ref(`<p style="line-height:40px;">在山洞的深处，勇士终于发现了那把传说中的神奇剑。他握住剑柄，感受到了一股强大的力量流入体内。从此以后，他成为了神秘国度的守护者，用这把剑保护着人民免受邪恶的侵害。</p>
	
		<p style="line-height:40px;">图3: 勇士找到神奇剑</p>
	
	`)
</script>

t-read-more Props

属性名	说明	类型	默认值
closeText	关闭时的提示文字	string	'展开阅读全文'
openText	展开时的提示文字	string	'收起'
shadow	是否显示阴影	boolean	false
shadowClass	阴影的自定义样式	string	-
shadowBoxClass	阴影容器的自定义样式	string	-
moreBoxClass	更多按钮容器的自定义样式	string	-
moreTextClass	更多按钮文本的自定义样式	string	-
moreIconClass	更多按钮图标的自定义样式	string	-
path	点击组件后跳转的页面路径	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题	string	'normal'
size	组件尺寸	string	'mini'

t-read-more Slots

插槽名	说明
default	默认插槽，放置需要折叠的内容