废话不多说上代码
CollapseText.vue
<template><view v-if="descr"><scroll-view class="collapse-text" :style="{maxHeight: computedMaxHeight}"><!-- <slot></slot> --><rich-text :nodes="descr"></rich-text></scroll-view><view class="lookcount" @click="handleViewAll">{{operateText}}<image v-if="show" src="../../static/sq@2x.png" mode=""></image><image v-else src="../../static/zk@2x.png" mode=""></image></view></view>
</template><script>export default {name: "CollapseText",props: {maxHeight: {default: 230},descr: ''},data() {return {overflow: false,show: false,operateText: '查看全部'};},computed: {computedMaxHeight() {return (!this.maxHeight || this.show || !this.overflow) ? null : this.maxHeight + 'rpx'}},mounted() {const query = uni.createSelectorQuery().in(this);query.select('.collapse-text').fields({rect: true,scrollOffset: true,size: true}, data => {this.overflow = data.height <= data.scrollHeight}).exec();},methods: {handleViewAll() {this.show = !this.showthis.operateText = this.show ? '收起' : '查看全部'}}}
</script><style>.collapse-text {overflow: hidden;}.lookcount {height: 88rpx;font-size: 24rpx;color: #646464;display: flex;align-items: center;justify-content: center;}.lookcount image {width: 32rpx;height: 32rpx;margin-left: 4rpx;}
</style>用法
首先导入
剩下就是直接在用template了
最后样式补上
这里方便复制
.navcount {width: 686rpx;font-size: 28rpx;color: #646464;line-height: 40rpx;max-height: 300rpx;overflow: hidden;}大功告成
