wangluohuoyun-app/pages/riders/test.vue

<template>
	<view class="intro">
		<view class="introText">
			<span v-if="introduce" ref="text" @click="clickTotal">
				{{introduce}}
			</span>
			<span v-if='exchangeButton' @click="clickTotal">
				{{introduceNew}}
			</span>
			<view class="unfold" @click="clickTotal" v-if="showExchangeButton">
				<span>{{showTotal ? '展开' : '收起'}}</span>
			</view>
		</view>
	</view>
</template>
 
<script>
	export default {
		data() {
			return {
				title: "演示展开收起",
				introduce: "",
				introduceNew: "",
				introduceOld: "",
				// 是否展示所有文本内容
				showTotal: true,
				// 显示展开还是收起
				exchangeButton: false,
				// 是否显示展开收起按钮
				showExchangeButton: false,
				rem: ""
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			clickTotal() {
				this.showTotal = !this.showTotal;
				if (this.showTotal && this.showExchangeButton == true) {
					this.$refs.text.innerHTML = this.introduceNew
				} else {
					this.$refs.text.innerHTML = this.introduceOld
				}
			},
			getRem() {
				const defaultRem = 16;
				let winWidth = window.innerWidth;
				let rem = (winWidth / 375) * defaultRem;
				return rem;
			},
			init() {
				this.introduce =
					"唐朝，可谓歌舞盛华，乐文辉煌。与此同时，女伎们的身价也推向了巅峰。青楼之市火爆，歌舞伎成了热门之业。沦落为青楼女子虽不光彩，但依然有很多人选择这一职业，在这些女子中，琴棋书画兼备的也大有人在长安城内，有一青楼，名为“玉满楼”，别名“玉月满花”，此中之女子皆是琴棋书画兼备，相传呐，那都是卖艺不卖身的存在。我们的故事就要从这玉满楼开始说起。在长安城内，有一青楼，名为“玉满楼”，别名“玉月满花”，此中之女子皆是琴棋书画兼备，相传呐，那都是卖艺不卖身的存在。我们的故事就要从这玉满楼开始说起。";
				this.introduceOld =
					"唐朝，可谓歌舞盛华，乐文辉煌。与此同时，女伎们的身价也推向了巅峰。青楼之市火爆，歌舞伎成了热门之业。沦落为青楼女子虽不光彩，但依然有很多人选择这一职业，在这些女子中，琴棋书画兼备的也大有人在长安城内，有一青楼，名为“玉满楼”，别名“玉月满花”，此中之女子皆是琴棋书画兼备，相传呐，那都是卖艺不卖身的存在。我们的故事就要从这玉满楼开始说起。在长安城内，有一青楼，名为“玉满楼”，别名“玉月满花”，此中之女子皆是琴棋书画兼备，相传呐，那都是卖艺不卖身的存在。我们的故事就要从这玉满楼开始说起。";
			},
		},
		watch: {
			introduce: function() {
				this.$nextTick(
					function() {
						// 判断介绍是否超过四行
						let rem = parseFloat(this.getRem());
						if (!this.$refs.text) {
							return;
						}
						let rows = this.$refs.text.getClientRects().length // 文本行数
						let txt = this.introduceOld // 文本
						console.log(txt)
						// 文本为3行时的字数长度
						let tl = 0 // eslint-disable-line no-unused-vars
						// 数据量大时速度太慢，需优化(二分法？)
						while (rows > 4) { // 超出，遍历文字并进行截取，直到文本小于三行   显示4行
							let step = 1 // 末尾扣除的字数
							if (/<br\/>$/.test(txt)) { // 回退的时候，如果碰到换行要整体替换
								step = 5
							}
							txt = txt.slice(0, -step) // 截取
							this.showExchangeButton = true
							this.$refs.text.innerHTML = txt
							rows = this.$refs.text.getClientRects().length
							tl += step
						}
						while (rows < 4) { //、显示4行
							txt = txt
							this.$refs.text.innerHTML = txt
							return
						}
						let num = 0;
						if (txt.charCodeAt(txt.length - 1) < 255) {
							num = 2
						} else {
							num = 1
						}
						if (txt.charCodeAt(txt.length - 2) < 255) {
							num = num + 2
						} else {
							num = num + 1
						}
						if (txt.charCodeAt(txt.length - 4) < 255) {
							num = num + 2
						} else {
							num = num + 1
						}
						this.$refs.text.innerHTML = txt.slice(0, -1 * num) + '...'
						this.introduceNew = txt.slice(0, -1 * num) + '...'
					}.bind(this)
				);
			}
		},
	}
</script>
 
<style>
	.intro {
		width: 95%;
		border: 2px solid grey;
		padding: 10px;
		margin: 0 auto;
		box-sizing: border-box;
		overflow: hidden;
	}
 
	.intro .introText {
		text-align: justify;
		position: relative;
		display: block;
	}
 
	.intro .introText span {
		font-size: 14px;
		color: #627081;
	}
 
	.intro .unfold {
		position: absolute;
		right: 0;
		bottom: 0;
		opacity: 1;
	}
 
	.intro .unfold span {
		color: #2878ff;
		cursor: pointer;
		font-size: 30rpx;
	}
</style>