ReadMore 展开阅读更多
优质
小牛编辑
130浏览
2023-12-01
ReadMore 展开阅读更多 平台差异说明
App | H5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 头条小程序 | 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>
展开收起
配置toggle
为true
,展开后可以收起,否则展开后没有收起的按钮
<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
即可,关于paddingTop
和marginTop
自行调整至合适数值即可。
<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 | 内容超出此高度才会显示展开全文按钮,单位rpx | String | Number | 400 | - |
toggle | 展开后是否显示收起按钮 | Boolean | false | true |
close-text | 关闭时的提示文字 | String | 展开阅读全文 | - |
font-size | 提示文字的大小,单位rpx | String | Number | 28 | - |
open-text | 展开时的提示文字 | String | 收起 | - |
color | 提示文字的颜色 | String | #2979ff | - |
shadow-style | 对阴影的自定义处理,对象形式 | Object | 见上方说明 | - |
text-indent 1.5.6 | 段落首行缩进的字符个数,无需缩进请设置为0 | String | 2em | - |
index 1.5.8 | 用于在open 和close 事件中当作回调参数返回 | String | Number | - | - |
Methods
此方法如要通过ref手动调用
名称 | 说明 |
---|---|
init | 重新初始化组件内部高度计算过程,如果内嵌u-parse组件时可能需要用到 |
Events
事件名 | 说明 | 回调参数 |
---|---|---|
open 1.5.8 | 内容被展开时触发 | index - props中传入的index 参数值 |
close 1.5.8 | 内容被收起时触发 | index - props中传入的index 参数值 |