Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

measureInAppWindow和getBoundingClientRect获取循环组件的尺寸和位置信息失败 #4023

Open
FMLLL opened this issue Sep 11, 2024 · 1 comment
Assignees

Comments

@FMLLL
Copy link

FMLLL commented Sep 11, 2024

描述错误
measureInAppWindow和getBoundingClientRect获取循环组件的尺寸和位置信息失败。循环组件及外层加了对应的collapsable属性也是报错,而去掉v-for循环则能够正常返回

返回错误信息如下:
获取item元素信息失败 Error: getBoundingClientRect cannot get nodeId of ElementNode(div) or ElementNode(div) is not mounted
at eval (webpack-internal:///./node_modules/@hippy/vue/dist/index.js:12211:23)
at new Promise ()
at Object.getBoundingClientRect (webpack-internal:///./node_modules/@hippy/vue/dist/index.js:12209:12)
at eval (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/@hippy/vue-loader/lib/index.js?!./node_modules/scope-loader/index.js!./src/pages/second.vue?vue&type=script&lang=js&:27:58)
at TimerModule.js:4:36

预期行为
针对循环组件的元素,调用measureInAppWindow和getBoundingClientRect能正常返回对应的尺寸和位置信息。

版本
-Hippy原生SDK版本:3.3.0
-前端SDK和版本[@hippy/vue 2]

<template>
    <div class="page" :collapsable="false">
        <div
            class="item"
            :key="item"
            :collapsable="false"
            :ref="`item-${item}`"
            v-for="item in list"
        >
            <span>{{ item }}</span>
        </div>
    </div>
</template>
<script>
import Vue from "vue";

export default {
    data() {
        return {
            list: [1],
        };
    },
    mounted() {
        setTimeout(() => {
            Vue.Native.getBoundingClientRect(this.$refs[`item-1`])
                .then((data) => {
                    console.log("获取item元素信息成功", data);
                })
                .catch((err) => {
                    console.log(`获取item元素信息失败`, err);
                });
        }, 3000);
    },
};
</script>

<style scoped>
.page {
    width: 750;
    height: 300;
    flex-direction: row;
}
.item {
    padding-left: 50;
    padding-right: 50;
    height: 30;
    color: #fff;
    background-color: #0a9eed;
}
</style>

@villiamVIX
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants