Fusions

Appearance

ReadMore 查看更多 ​

iPhone

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

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

通过 slot 传入正文内容

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

<script setup>
    import { ref } from 'vue';

    // data数据
    const content = ref(`
        采薇采薇，薇亦刚止。曰归曰归，岁亦阳止。王事靡盬，不遑启处。忧心孔疚，我行不来！
        彼尔维何？维常之华。彼路斯何？君子之车。戎车既驾，四牡业业。岂敢定居？一月三捷。
        驾彼四牡，四牡骙骙。君子所依，小人所腓。四牡翼翼，象弭鱼服。岂不日戒？玁狁孔棘！
        昔我往矣，杨柳依依。今我来思，雨雪霏霏。行道迟迟，载渴载饥。我心伤悲，莫知我哀！
    `);
</script>

设置展开高度 ​

通过 showHeight 属性设置展开高度，单位为px，只有 slot 传入的内容高度超出这个值，才会出现"展开阅读全文"字样的按钮

html
<fu-read-more showHeight="200">
    <rich-text :nodes="content"></rich-text>
</fu-read-more>

如何异步初始化 ​

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

html
<template>
    <fu-read-more ref="readMoreRef">
        <rich-text :nodes="content"></rich-text>
    </fu-read-more>
</template>

<script setup>
    import { ref, onMounted } from 'vue';

    // data数据
    const readMoreRef = ref();
    const content = ref('');

    // 生命周期
    onMounted(() => {
        // 模拟后端请求
        setTimeout(() => {
            content.value = `
                采薇采薇，薇亦刚止。曰归曰归，岁亦阳止。王事靡盬，不遑启处。忧心孔疚，我行不来！
                彼尔维何？维常之华。彼路斯何？君子之车。戎车既驾，四牡业业。岂敢定居？一月三捷。
                驾彼四牡，四牡骙骙。君子所依，小人所腓。四牡翼翼，象弭鱼服。岂不日戒？玁狁孔棘！
                昔我往矣，杨柳依依。今我来思，雨雪霏霏。行道迟迟，载渴载饥。我心伤悲，莫知我哀！
            `;

            // 使用 nextTick 确保 DOM 更新后初始化组件
            setTimeout(() => {
                if(readMoreRef.value && readMoreRef.value.init) {
                    readMoreRef.value.init();
                }
            }, 0)
        }, 2500)
    });
</script>

自定义样式 ​

可以通过 shadowStyle 属性设置白色虚化的阴影，用以将点击区域与文字内容进行融合，如果不想要这个阴影，可以调整 shadowStyle 对象，此对象内容如下：

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

如果不想要隐藏，可以将 backgroundImage 设置为 none，同时 paddingTop 和 marginTop 自行调整合适数值即可。

html
<template>
    <fu-read-more ref="readMoreRef" :shadowStyle="shadowStyle" :showHeight="200">
        <rich-text :nodes="content"></rich-text>
    </fu-read-more>
</template>

<script setup>
    import { ref, reactive } from 'vue';

    // data数据
    const readMoreRef = ref();
    const content = ref('');

    // 定义阴影样式对象
    const shadowStyle = reactive({
        backgroundImage: "none",
        paddingTop: "0",
        marginTop: "20rpx"
    });
</script>

API ​

ReadMore Props ​

属性名说明类型默认值可选值
showHeight内容超出此高度才会显示"展开阅读全文"按钮，单位为pxNumber400-
closeBtn展开后是否显示"收起"按钮Booleanfalsetrue
openText展开提示文字String展开阅读全文-
closeText收起提示文字String收起-
openIcon展开提示图标Stringdown-
closeIcon收起提示图标Stringup-
shadowStyle对阴影的自定义处理，对象形式，详见上方自定义样式Object--
index用于在 open 和 close 事件中当做回调参数返回String｜Number--

ReadMore Events ​

事件名说明回调参数
open点击展开按钮触发() => void
close点击收起按钮触发() => void

ReadMore Slot ​

名称说明
default自定义内容