<template>
	<!-- 
	判断行数显示字体大小
	一行：20rpx
	二行：30rpx
	存在问题：页面显示两行的时候就显示两行的字体大小
	页面显示三行的时候应该就显示三行的字体大小，此时就还是两行所设置的字体大小。
	因为此时的字体大小撑开容器的高度还是两行的高度
	-->
	<view class="body">
		<view class="content" :class=" {'fs-30':two,'fs-40':three} ">
			阿斯卡来得及啊阿斯卡来得及啊阿斯卡来得及啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</view>
		<view class="placeholder">占位 </view>
	</view>
</template>

<script setup>
	import {
		http
	} from "@/api/api.js"
	import {
		onMounted,
		getCurrentInstance,
		ref,
	} from "vue";
	let placeholderVal = ref('占位')
	let contentHeight = ref(0)
	let oneLineHeight = ref(0)
	let one = ref(false)
	let two = ref(false)
	let three = ref(false)
	let ins = getCurrentInstance()
	onMounted(() => {
		let query = uni.createSelectorQuery().in(ins);
		let flag = 21
		let a = 20
		let b = 30

		// 通过占位元素获取单行文本的高度
		query.select('.placeholder').boundingClientRect(data => {
			oneLineHeight.value = data.height
			/* if (contentHeight.value >= oneLineHeight.value && contentHeight.value > oneLineHeight.value *
				2) {
				one.value = true
			}
			console.log('单行', oneLineHeight.value);
			console.log(one.value);
			 21 42 63
			 */
			console.log('单行', oneLineHeight.value);
		}).exec();
		query.select('.content').boundingClientRect(data => {
			contentHeight.value = data.height
			if (contentHeight.value >= oneLineHeight.value * 1 && contentHeight.value <=
				oneLineHeight
				.value * 2) {
				two.value = true
			}
			/* if (contentHeight.value <= oneLineHeight.value * 2) {
				two.value = true
			} */
			console.log('两行', two.value);
			if (contentHeight.value > oneLineHeight.value * 2 && contentHeight.value <=
				oneLineHeight
				.value * 3) {
				three.value = true
			}
			/* if (contentHeight.value <= oneLineHeight.value * 3) {
				three.value = true
			} */
			console.log('三行', three.value);
			console.log('内容', contentHeight.value);
		}).exec();

		placeholderVal.value = ''

	})
</script>
<style scoped lang='scss'>
	.body {
		font-size: 32rpx;
		padding: 20rpx;

		.content {}

		.placeholder {
			font-size: 32rpx;
		}

		.fs-30 {
			font-size: 40rpx;
			color: red;
		}

		.fs-40 {
			font-size: 50rpx;
			color: blue;
		}
	}
</style>