CNCEC_APP/uni_modules/uview-pro/components/u-read-more/u-read-more.vue

<template>
    <view>
        <view
            class="u-content"
            :class="[elId, customClass]"
            :style="
                $u.toStyle(
                    {
                        height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto',
                        textIndent: textIndent
                    },
                    customStyle
                )
            "
        >
            <slot></slot>
        </view>
        <view
            @tap="toggleReadMore"
            v-if="isLongContent"
            class="u-content__showmore-wrap"
            :class="{ 'u-content__show-more': showMore }"
            :style="[innerShadowStyle]"
        >
            <text
                class="u-content__showmore-wrap__readmore-btn"
                :style="{
                    fontSize: fontSize + 'rpx',
                    color: color
                }"
            >
                {{ showMore ? openText : closeText }}
            </text>
            <view class="u-content__showmore-wrap__readmore-btn__icon u-flex">
                <u-icon :color="color" :size="fontSize" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
            </view>
        </view>
    </view>
</template>

<script lang="ts">
export default {
    name: 'u-read-more',
    options: {
        addGlobalClass: true,
        // #ifndef MP-TOUTIAO
        virtualHost: true,
        // #endif
        styleIsolation: 'shared'
    }
};
</script>

<script setup lang="ts">
import { ref, computed, watch, onMounted, nextTick, getCurrentInstance } from 'vue';
import { $u } from '../..';
import { ReadMoreProps } from './types';

/**
 * readMore 阅读更多
 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
 * @tutorial https://uviewpro.cn/zh/components/readMore.html
 * @property {String|Number} showHeight 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
 * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
 * @property {String} closeText 关闭时的提示文字（默认“展开阅读全文”）
 * @property {String|Number} fontSize 提示文字的大小，单位rpx（默认28）
 * @property {String} textIndent 段落首行缩进的字符个数（默认2em）
 * @property {String} openText 展开时的提示文字（默认“收起”）
 * @property {String} color 提示文字的颜色（默认主题色primary）
 * @property {Object} shadowStyle 是否显示阴影，样式对象
 * @property {String|Number} index open和close事件时，将此参数返回在回调参数中
 * @event open 展开时触发
 * @event close 收起时触发
 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
 */

const props = defineProps(ReadMoreProps);

const emit = defineEmits(['open', 'close']);

// 是否需要隐藏一部分内容
const isLongContent = ref(false);
// 当前隐藏与显示的状态，true-显示，false-收起
const showMore = ref(false);
// 生成唯一class
const elId = ref('');
const instance = getCurrentInstance();

// 展开后无需阴影，收起时才需要阴影样式
const innerShadowStyle = computed(() => {
    return showMore.value ? {} : props.shadowStyle;
});

// 监听 toggle 和 showHeight 变化，重新初始化
watch(
    () => `${props.toggle}-${props.showHeight}`,
    () => {
        init();
    }
);

onMounted(() => {
    elId.value = $u.guid();
    nextTick(() => {
        init();
    });
});

/**
 * 初始化内容高度判断
 * @description 判断内容是否超出指定高度，决定是否显示展开/收起按钮
 */
function init() {
    $u.getRect('.' + elId.value, instance).then((res: { height: number }) => {
        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
        if (res.height > uni.upx2px(Number(props.showHeight))) {
            isLongContent.value = true;
            showMore.value = false;
        }
    });
}
// 显式暴露init方法
defineExpose({
    init
});

/**
 * 展开或者收起内容
 * @description 切换显示状态，发出 open/close 事件
 */
function toggleReadMore() {
    showMore.value = !showMore.value;
    // 如果toggle为false，隐藏"收起"部分的内容
    if (props.toggle == false) isLongContent.value = false;
    // 发出打开或者收齐的事件
    emit(showMore.value ? 'open' : 'close', props.index);
}
</script>

<style lang="scss" scoped>
@import '../../libs/css/style.components.scss';

.u-content {
    font-size: 30rpx;
    color: $u-content-color;
    line-height: 1.8;
    text-align: left;
    overflow: hidden;

    &__show-more {
        padding-top: 0;
        background: none;
        margin-top: 20rpx;
    }

    &__showmore-wrap {
        position: relative;
        width: 100%;
        padding-bottom: 26rpx;
        @include vue-flex;
        align-items: center;
        justify-content: center;

        &__readmore-btn {
            @include vue-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;

            &__icon {
                margin-left: 14rpx;
            }
        }
    }
}
</style>