uniapp 自定义展开/收起组件（适配H5、微信小程序等）

今天遇到啦个需求，内容展开收起功能，没有的用，那边手搓一个吧

因为项目使用到的也只有H5端和微信小程序端，所以如果其余端开发的话，需要看一下适当的调整，不出意外的话就直接用吧，废话不多说，上菜：

javascript 复制代码

<template>
    <view class="more">
        <view class="more_content" :style="{ maxHeight: getMaxH }">
            <view class="more_content_text" :style="{ fontSize: size + 'rpx' }">
                <slot>{{ text }}</slot>
            </view>
        </view>
        <view class="more_btn" :style="{ fontSize: size + 'rpx' }" v-if="domHeight.inner > domHeight.outer"
            @tap="isMore = !isMore">
            {{ isMore ? '收起' : '展开' }}
        </view>
    </view>
</template>

<script>
export default {
    /**
     * 1、设置maxH，row将会失效
    */
    props: {
        // 文本
        text: {
            type: String,
            default: ''
        },
        // 最大高度 rpx
        maxH: {
            type: Number,
            default: 0
        },
        // 字体大小 rpx
        size: {
            type: Number,
            default: 28
        },
        // 行数
        row: {
            type: Number,
            default: 2
        }
    },
    data() {
        return {
            isMore: false, // 是否显示更多
            domHeight: {
                outer: 0,
                inner: 0,
            }
        }
    },
    async mounted() {
        let outerDom = await this.$util.getDomInfo('.more_content', this);
        let innerDom = await this.$util.getDomInfo('.more_content_text', this);
        this.domHeight = {
            outer: outerDom.height,
            inner: innerDom.height
        }
    },
    computed: {
        getMaxH() {
            let h = this.row * this.size * 1.5;
            // #ifdef MP-WEIXIN
            h -= 8;
            // #endif
            let more = this.domHeight.inner / (uni.upx2px(100) / 100) + 'rpx'; // 展开高度
            let noMore = this.maxH ? (this.maxH + 'rpx') : (h + 'rpx'); // 收起高度
            return this.isMore ? more : noMore
        },
    }
}
</script>

<style lang="scss" scoped>
.more {
    position: relative;

    .more_btn {
        position: absolute;
        right: 0;
        bottom: 0;
        padding-left: 20rpx;
        line-height: 1.5;
        // background: red;
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 100%);
    }
}

.more_content {
    overflow: hidden;
    transition: .2s;
}

.more_content_text {
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-wrap;
    line-height: 1.5;
}
</style>

props	说明	默认值
text	需要显示的文本	-
maxH	设置最大高度（设置maxH后row属性便会失效）	0
size	内容字体大小（行高为1.5倍）	28
row	收起时显示行数（设置maxH后row属性便会失效）	2
[参数说明]

|---------|------|---|
| default | 默认插槽 | - |
[插槽]

可通过text属性传入文本，也可以通过默认插槽传入自定义内容，任君选择~

补充一下组件里面使用到的工具函数：

this.$util.getDomInfo

javascript 复制代码

	getDomInfo: function (id, that) {
		return new Promise((resolve, reject) => {
			if (!id) return reject('id/类名 不能为空')
			if (!that) return reject('this指向不能为空')
			const query = uni.createSelectorQuery().in(that);
			query.select(id).boundingClientRect(data => {
				// console.log("节点离页面顶部的距离为" + data.height);
				resolve(data || {})
			}).exec();
		})
	},