该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。

基本使用

通过slot传入正文内容

<template>
	<un-read-more2>
		<rich-text :nodes="content"></rich-text>
	</un-read-more2>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	// 这是一段很长的文字，也可能包含有HTML标签等内容
	const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
	苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
	无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
</script>

展开收起

配置toggle为true，展开后可以收起，否则展开后没有收起的按钮

<template>
	<un-read-more2 :toggle="true">
		<rich-text :nodes="content"></rich-text>
	</un-read-more2>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
	苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
	无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
</script>

配置展开高度

可以配置一个高度，单位rpx，只有slot传入的内容高度超出这个值，才会出现"展开阅读全文"字样的按钮

<template>
	<un-read-more2 showHeight="600">
		<rich-text :nodes="content"></rich-text>
	</un-read-more2>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
	苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
	无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
</script>

异步初始化

有时候需要展示的内容是从后端获取的，组件内部的mounted生命周期初始化时，请求尚未回来，会导致 内容的高度在初始化有误差。可以在请求完毕渲染后(指的是nextTick)，通过ref调用组件的init方法，重新初始化

<template>
	<un-read-more2 ref="uReadMore">
		<rich-text :nodes="content"></rich-text>
	</un-read-more2>
</template>

<script setup lang="ts">
	import { ref, onMounted, nextTick } from 'vue'
	import type { UnReadMore } from '../uni_modules/uview-unix'
	
	const uReadMore = ref<UnReadMore | null>(null)
	const content = ref('')
	
	onMounted(() => {
		// 模拟后端请求
		setTimeout(() => {
			content.value = `山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
			t苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
			无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`
			// 请注意上方已在组件中添加ref-uReadMore
			nextTick(() => {
				uReadMore.value?.init();
			})
		}, 2000)
	})
</script>

自定义样式

此组件上边部分有一个白色虚化的阴影，用以将点击区域与文字内容进行融合，如果您不想要这个阴影，可以调整shadowStyle对象，此对象内部如下：

{
    backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
    paddingTop: "100px",
    marginTop: "-100px",
}

如果您不想要阴影，将backgroundImage设置为none即可，关于paddingTop和marginTop自行调整至合适数值即可。

<template>
	<un-read-more2 :shadowStyle="shadowStyle" :showHeight="200">
		<rich-text :nodes="content"></rich-text>
	</un-read-more2>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	
	const content = ref(`山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。
	苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。
	无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？`)
	
	const shadowStyle = ref({
		backgroundImage: "none",
		paddingTop: "0",
		marginTop: "20rpx"
	})
</script>

API

Props

参数	说明	类型	默认值
showHeight	内容超出此高度才会显示展开全文按钮，单位rpx	string | number	400
toggle	展开后是否显示收起按钮	boolean	false
closeText	关闭时的提示文字	string	展开阅读全文
openText	展开时的提示文字	string	收起
color	提示文字的颜色	string	#2979ff
fontSize	提示文字的大小，默认单位px	string | number	14
shadowStyle	对阴影的自定义处理，对象形式	object | string	见上方说明
textIndent	段落首行缩进的字符个数	string	2em
name	用于在open和close事件中当作回调参数返回	string | number	-

Events

事件名	说明	回调参数
open	内容被展开时触发	Function
close	内容被收起时触发	Function

Scss 变量

变量名	默认值	说明
$un-read-more2-padding-bottom	20px	阅读更多组件底部内边距

提示

组件内部默认使用 scss 变量，如需修改，请查看 scss 变量使用 文档