该组件一般用于内容较长,预先收起一部分,点击展开全部内容的场景。
#平台差异说明
App(vue) | App(nvue) | H5 | 小程序 |
---|---|---|---|
√ | √ | √ | √ |
#基本使用
通过slot传入正文内容
<template>
<u-read-more>
<rich-text :nodes="content"></rich-text>
</u-read-more>
</template>
<script>
export default {
data() {
return {
// 这是一段很长的文字,也可能包含有HTML标签等内容
content: `山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。
苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。
无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?`,
}
}
}
</script>
copy
#兼容性
由于一些微信小程序平台的渲染能力的问题,在解析u-parse组件内容时会比较耗时,导致read-more
组件内部无法准确得知 内容的高度,而出现计算错误,这种情况下,我们需要借助u-parse
组件的@load
(内容多为文字时)或者@ready
(内容多为图片时,可能会有较大延时)事件,通过ref
重新初始化read-more
组件的高度,如下:
<template>
<u-read-more ref="uReadMore">
<u-parse :content="content" @load="load"></u-parse>
</u-read-more>
</template>
<script>
export default {
data() {
return {
// 这是一段很长的文字,也可能包含有HTML标签等内容
content: `山不在高,有仙则名。水不在深,有龙则灵。斯是陋室,惟吾德馨。
苔痕上阶绿,草色入帘青。谈笑有鸿儒,往来无白丁。可以调素琴,阅金经。
无丝竹之乱耳,无案牍之劳形。南阳诸葛庐,西蜀子云亭。孔子云:何陋之有?`,
}
},
methods: {
load() {
this.$refs.uReadMore.init();
}
}
}
</script>
copy
#展开收起
配置toggle
为true
,展开后可以收起,否则展开后没有收起的按钮
<u-read-more :toggle="true">
<rich-text :nodes="content"></rich-text>
</u-read-more>
copy
#配置展开高度
可以配置一个高度,单位rpx,只有slot传入的内容高度超出这个值,才会出现"展开阅读全文"字样的按钮
<u-read-more showHeight="600">
<rich-text :nodes="content"></rich-text>
</u-read-more>
copy
#异步初始化
有时候需要展示的内容是从后端获取的,组件内部的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>
copy
#自定义样式
此组件上边部分有一个白色虚化的阴影,用以将点击区域与文字内容进行融合,如果您不想要这个阴影,可以调整shadowStyle
对象,此对象内部如下:
{
// #ifndef APP-NVUE
backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
// #endif
// #ifdef APP-NVUE
// nvue上不支持设置复杂的backgroundImage属性
backgroundImage: "linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))",
// #endif
paddingTop: "100px",
marginTop: "-100px",
}
copy
如果您不想要阴影,将backgroundImage
设置为none
即可,关于paddingTop
和marginTop
自行调整至合适数值即可。
<template>
<u-read-more ref="uReadMore" :shadowStyle="shadowStyle" :showHeight="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>