返回介绍

开发指南

组件

JS

模板

ReadMore 展开阅读更多

发布于 2021-04-03 05:35:23 字数 5825 浏览 819 评论 0 收藏 0

ReadMore 展开阅读更多 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

通过slot传入正文内容

<template>
	<u-read-more>
		<rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

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

兼容性

由于一些微信小程序平台的渲染能力的问题,在解析u-parse组件内容时会比较耗时,导致read-more组件内部无法准确得知 内容的高度,而出现计算错误,这种情况下,我们需要借助u-parse组件的@load(内容多为文字时)或者@ready(内容多为图片时,可能会有较大延时)事件,通过ref 重新初始化read-more组件的高度,如下:

<template>
	<u-read-more ref="uReadMore">
		<u-parse :html="content" @load="parseLoaded"></u-parse>
	</u-read-more>
</template>

<script> 
	export default {
		data() {
			return {
				// 这是一段很长的文字,也可能包含有HTML标签等内容
				content: `山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。
				苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。
				无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?`,
			}
		},
		methods: {
			parseLoaded() {
				this.$refs.uReadMore.init();
			}
		}
	}
</script>

展开收起

配置toggletrue,展开后可以收起,否则展开后没有收起的按钮

<u-read-more :toggle="true">
	<rich-text :nodes="content"></rich-text>
</u-read-more>

配置展开高度

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

<u-read-more show-height="600">
	<rich-text :nodes="content"></rich-text>
</u-read-more>

异步初始化

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

<template>
	<u-read-more ref="uReadMore">
		<rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

<script> 
	export default {
		data() {
			return {
				content: '',
			}
		},
		onLoad() {
			// 模拟后端请求
			setTimeout(() => {
				this.content = `山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。
				苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。
				无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?`,
				// 请注意上方已在组件中添加ref-uReadMore
				this.$nextTick(() => {
					this.$refs.uReadMore.init();
				})
			}, 2000);
		}
	}
</script>

自定义样式

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

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

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

<template>
	<u-read-more ref="uReadMore" :shadow-style="shadowStyle" :show-height="200">
		<rich-text :nodes="content"></rich-text>
	</u-read-more>
</template>

<script> 
	export default {
		data() {
			return {
				content: '',
				shadowStyle: {
					backgroundImage: "none",
					paddingTop: "0",
					marginTop: "20rpx"
				}
			}
		}
	}
</script>

API

Props

参数说明类型默认值可选值
show-height内容超出此高度才会显示展开全文按钮,单位rpxString | Number400-
toggle展开后是否显示收起按钮Booleanfalsetrue
close-text关闭时的提示文字String展开阅读全文-
font-size提示文字的大小,单位rpxString | Number28-
open-text展开时的提示文字String收起-
color提示文字的颜色String#2979ff-
shadow-style对阴影的自定义处理,对象形式Object见上方说明-
text-indent 1.5.6段落首行缩进的字符个数,无需缩进请设置为0String2em-
index 1.5.8用于在openclose事件中当作回调参数返回String | Number--

Methods

此方法如要通过ref手动调用

名称说明
init重新初始化组件内部高度计算过程,如果内嵌u-parse组件时可能需要用到

Events

事件名说明回调参数
open 1.5.8内容被展开时触发index - props中传入的index参数值
close 1.5.8内容被收起时触发index - props中传入的index参数值

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文