组件text-expand.uvue代码:
<template>
<view class="text-container">
<!-- 文本内容 -->
<text class="content" :style="textFontStyle">{{content}}</text>
<!-- 展开按钮 -->
<text class="toggle-text" v-if="showToggle">{{ '查看详情' }}</text>
</view>
</template>
<script setup>
const props = defineProps({
// 文本内容
content: {
type: String,
default: ''
},
// 最大行数
maxLines: {
type: Number,
default: 3
},
// 字体大小
fontSize: {
type: Number,
default: 15
},
// 行高
lineHeight: {
type: Number,
default: 1.4
}
})
const showToggle = ref(false)
const limitHeight = ref(0)
const textFontStyle = computed(()=> {
const baseStyle = {
'font-size': props.fontSize + 'px',
'line-height': props.lineHeight,
}
if (showToggle.value) {
return {
...baseStyle,
'height': `${limitHeight.value}px`,
}
}
return {
...baseStyle,
'height': 'auto',
}
});
const calcHeight = ():number => {
const calcValue = props.maxLines.valueOf() * props.fontSize.valueOf() * props.lineHeight.valueOf();
return Math.ceil(calcValue);
}
const checkOverflow = ()=> {
if (props.content == null || props.content.length <= 0) {
return
}
const instance = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance)
query.select('.content')
.boundingClientRect()
.exec((res) => {
if (res != null && res[0] != null) {
const rect = res[0] as NodeInfo
const rectHeight = Math.floor(rect.height ?? 0)
// 如果内容高度大于最大行数高度,显示展开按钮
showToggle.value = rectHeight > limitHeight.value
console.log('checkOverflow rectHeight:', rectHeight, 'limitHeight: ', limitHeight.value, 'content: ',props.content)
}
});
};
onMounted(() => {
checkOverflow();
});
onLoad(()=> {
limitHeight.value = calcHeight()
});
</script>
<style lang="scss">
.content {
position: relative;
font-size: 15px;
color: $uni-subtext-color;
overflow: hidden;
text-overflow: ellipsis;
}
.toggle-text {
position: absolute;
right: 0;
bottom: 2px;
font-size: 15px;
color: #007AFF;
background-color: #ffffff;
// border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: -2px 0 3px rgba(0, 0, 0, 0.1);
}
</style>
页面代码:
<template>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<text class="label-content">{{'简介'}}</text>
<textExpandable class="intro-content" :content='doctorInfo.intro' :key="'intro'"></textExpandable>
<text class="label-content">{{'擅长'}}</text>
<textExpandable class="skill-content" :content='doctorInfo.skillful' :key="'skill'"></textExpandable>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
问题:
上述代码中class="intro-content"和class="skill-content",组件text-expand.uvue计算高度都是class="intro-content"的高度。
组件text-expand.uvue中计算高度方法
const instance = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance)
query.select('.content')
.boundingClientRect()
.exec();
获取到的都是第一个组件实例。
是我哪里写的不对吗?还是平台bug?
0 个回复