puqiang/uview-ui/components/u-read-more/u-read-more.vue

<template>
	<view class="">
		<view class="u-content" :class="[elId]" :style="{ height: isLongContent && !showMore ? showHeight + 'rpx' : 'auto' }">
			<slot></slot>
		</view>
		<view @tap="toggleReadMore" v-if="isLongContent" class="u-showmore-wrap" 
			:class="{ 'u-show-more': showMore }" 
			:style="[innerShadowStyle]"
		>
			<text class="u-readmore-btn" :style="{
				fontSize: fontSize + 'rpx',
				color: color
			}">
				{{ showMore ? openText : closeText }}
			</text>
			<u-icon :color="color" :size="fontSize" class="u-icon" :name="showMore ? 'arrow-up' : 'arrow-down'"></u-icon>
		</view>
	</view>
</template>

<script>
	/**
	 * readMore 阅读更多
	 * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
	 * @tutorial https://www.uviewui.com/components/readMore.html
	 * @property {String Number} show-height 内容超出此高度才会显示展开全文按钮，单位rpx（默认400）
	 * @property {Boolean} toggle 展开后是否显示收起按钮（默认false）
	 * @property {String} close-text 关闭时的提示文字（默认“展开阅读全文”）
	 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
	 * @property {String} open-text 展开时的提示文字（默认“收起”）
	 * @property {String} color 提示文字的颜色（默认#2979ff）
	 * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
	 */
	export default {
		name: "u-read-more",
		props: {
			// 默认的显示占位高度，单位为rpx
			showHeight: {
				type: [Number, String],
				default: 400
			},
			// 展开后是否显示"收起"按钮
			toggle: {
				type: Boolean,
				default: false
			},
			// 关闭时的提示文字
			closeText: {
				type: String,
				default: '展开阅读全文'
			},
			// 展开时的提示文字
			openText: {
				type: String,
				default: '收起'
			},
			// 提示的文字颜色
			color: {
				type: String,
				default: '#2979ff'
			},
			// 提示文字的大小
			fontSize: {
				type: [String, Number],
				default: 28
			},
			// 是否显示阴影
			shadowStyle: {
				type: Object,
				default() {
					return {
						backgroundImage: "linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)",
						paddingTop: "300rpx",
						marginTop: "-300rpx"
					}
				}
			}
		},
		watch: {
			paramsChange(val) {
				this.init();
			}
		},
		computed: {
			paramsChange() {
				return `${this.toggle}-${this.showHeight}`;
			},
			// 展开后无需阴影，收起时才需要阴影样式
			innerShadowStyle() {
				if(this.showMore) return {};
				else return this.shadowStyle
			}
		},
		data() {
			return {
				isLongContent: false, // 是否需要隐藏一部分内容
				showMore: false, // 当前隐藏与显示的状态，true-显示，false-收起
				elId: this.$u.guid(), // 生成唯一class
			};
		},
		mounted() {
			this.$nextTick(function(){
				this.init();
			})
		},
		methods: {
			init() {
				this.$uGetRect('.' + this.elId).then(res => {
					// 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
					if (res.height > uni.upx2px(this.showHeight)) {
						this.isLongContent = true;
						this.showMore = false;
					}
				})
			},
			// 展开或者收起
			toggleReadMore() {
				this.showMore = !this.showMore;
				// 如果toggle为false，隐藏"收起"部分的内容
				if (this.toggle == false) this.isLongContent = false;
			}
		}
	};
</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;
		text-indent: 2em;
		overflow: hidden;
	}

	.u-showmore-wrap {
		position: relative;
		width: 100%;
		padding-bottom: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.u-show-more {
		padding-top: 0;
		background: none;
		margin-top: 20rpx;
	}

	.u-readmore-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	.u-icon {
		margin-left: 14rpx;
	}
</style>