heroMan
heroMan
  • 发布:2025-08-18 10:33
  • 更新:2025-08-18 10:33
  • 阅读:13

一个页面中同一组件多实例计算高度混乱

分类:uni-app x

组件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?

2025-08-18 10:33 负责人:无 分享
已邀请:

要回复问题请先登录注册