ReadMore 展开阅读更多

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

平台差异说明

基本使用

通过slot传入正文内容

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