uniapp自定义富文本现实组件(支持查看和收起)

废话不多说上代码

CollapseText.vue

javascript 复制代码
<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.show
				this.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了

最后样式补上

这里方便复制

javascript 复制代码
.navcount {
		width: 686rpx;
		font-size: 28rpx;
		color: #646464;
		line-height: 40rpx;
		max-height: 300rpx;
		overflow: hidden;

	}

大功告成

相关推荐
gnip18 分钟前
链式调用和延迟执行
前端·javascript
SoaringHeart29 分钟前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.31 分钟前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu41 分钟前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss42 分钟前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师1 小时前
React面试题
前端·javascript·react.js
木兮xg1 小时前
react基础篇
前端·react.js·前端框架
ssshooter1 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘2 小时前
HTML--最简的二级菜单页面
前端·html
yume_sibai2 小时前
HTML HTML基础(4)
前端·html