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

基本使用

<template>
	<un-read-more>
		<text>浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
		忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，
		犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。
		轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声</text>
	</un-read-more>
</template>

受控模式

通过 v-model 可以控制组件的展开/收起状态：

<template>
	<un-read-more
		v-model="visible"
		:disabled="disabled" 
		:expand-text="disabled ? '付费解锁' : '展开'"
    	:expand-icon="disabled ? 'lock' : 'arrow-down'"
		@click="handleClick"
	>
		<text>浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
		忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，
		犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。
		轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声</text>
	</un-read-more>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const disabled = ref(true)
const visible = ref(false)

const handleClick = (name: string) => {
	if(disabled.value == true){
		uni.showModal({
			title: '提示',
			content: '是否解锁付费内容？',
			success: (res) => {
				if (res.confirm) {
					disabled.value = false
					visible.value = true
				}
			}
		})
	}
}
</script>

动态加载内容

当内容是动态加载时，可以通过 ref 调用组件的 init 方法来重新计算高度：

<template>
	<un-read-more ref="readMoreRef">
		<un-loading v-if="content == ''"></un-loading>
		{{ content }}
	</un-read-more>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const content = ref('')
const readMoreRef = ref<UnReadMoreComponentPublicInstance | null>(null)

onMounted(() => {
	// 模拟异步加载内容
	setTimeout(() => {
		content.value = `豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿。临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人；萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？呜呼！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔。滕王高阁临江渚，佩玉鸣鸾罢歌舞。画栋朝飞南浦云，珠帘暮卷西山雨。闲云潭影日悠悠，物换星移几度秋。阁中帝子今何在？槛外长江空自流。`
		// 内容加载完成后重新初始化
		readMoreRef.value?.init()
	}, 1500)
})
</script>

自定义文字和图标

<un-read-more 
	:height="100"
	:expand-text="'展开更多'"
	:expand-icon="'arrow-down'"
	:collapse-text="'收起'"
	:collapse-icon="'arrow-up'"
>
	<!-- 内容 -->
</un-read-more>

自定义遮罩样式

通过 maskStyle 属性可以自定义遮罩的样式：

<un-read-more mask-style="background-image: 'linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0))'">
	<!-- 内容 -->
</un-read-more>

API

Props

参数	说明	类型	默认值
modelValue	是否展开内容，双向绑定	boolean	null
height	内容超出此高度才会显示展开全文按钮，单位px	string | number	100
expandText	展开时的提示文字	string	展开
expandIcon	展开时的图标	string	arrow-down
collapseText	收起时的提示文字	string	收起
collapseIcon	收起时的图标	string	arrow-up
maskStyle	显示遮罩的样式	object | string	''
textSize	提示文字的大小，单位px	string | number	14
disabled	是否禁用	boolean	false
textColor	提示文字的颜色	string	null
index	组件索引标识，用于在事件中当作回调参数返回	string	null

Events

事件名	说明	类型
change	内容展开/收起状态变化时触发	Function
click	点击展开/收起按钮时触发	Function

Expose

方法名	说明	参数
toggle	切换展开/收起状态	-
init	重新初始化，用于动态加载内容后	-

Slots

名称	说明	类型
default	内容区域	-
toggle	展开/收起按钮的自定义内容	{ value: boolean, index: string }

Scss 变量

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

提示

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