hire-wx-houxuanren/components/zhao-text/zhao-text.vue

<template>
	<view class="zhao-text">
		<view class="position-text" id="text">
			{{text}}
		</view>
		<view class="text" v-if="show" :class="{line5:showmore}">
			{{text}}
		</view>
		<view class="text-more" v-if="showmore">
			<text>...</text>
			<text @click.stop="showmore = false">全文</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				showmore: false,
				show:false
			}
		},
		created() {

		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('#text').boundingClientRect(data => {
				if (data.height > 110) {
					this.showmore = true
				}
				this.show = true
			}).exec();
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.zhao-text {
		position: relative;
		overflow: hidden;
		.position-text{
			position: absolute;
			// top: -100vh;
			// left: -100vh;
			z-index: -100;
			font-size: 15px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 21px;
			text-align: justify;
			width: 100%;
		}
		.text-more {
			position: absolute;
			bottom: 0;
			right: 0;
			line-height: 21px;
			font-size: 15px;
			background-color: #fff;

			text:first-child {
				color: #333333;
				letter-spacing: 2rpx;
			}

			text:last-child {
				color: #0C66C2;
				margin-left: 2rpx;
				
				// padding: 0 4rpx;
			}
		}

		.line5 {
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			overflow: hidden;
		}

		.text {
			font-size: 15px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 21px;
			text-align: justify;
		}
	}
</style>