vue3 setup中获取元素高度

Posted 2023-04-30

参考技术A 在template中定义ref，与setup中命名要一样

在setup中要定义ref与template中名字一样，在onMounted中去操作元素，因为setup是相当于create，那是页面还没渲染，所以要在onmounted中去操作。要记得将元素return 不然没效果

在vue中，更新和nextTick中获取元素的大小比预期的要小？

【中文标题】在vue中，更新和nextTick中获取元素的大小比预期的要小？

【英文标题】：In vue, getting the size of an element is smaller in updated and nextTick than expected?

【发布时间】：2020-06-22 00:51:32

【问题描述】：

我正在尝试获取元素的高度。如果我尝试过早获取它，高度为 0px。我尝试了许多不同的方法来获取高度：在mounted()、created()、nextTick()、updated() 和window.eventListener 中，但我要么得到0px，要么得到比我想要的小得多的大小期望它是（~117px）。当我在页面上的控制台中运行相同的命令时，我得到了我期望它的大小（~278px）。如果我调整窗口大小，一切正常。我怎样才能让它从一开始就得到正确的高度？

在一个 vue 文件中，我有：

    mounted() 
        this.$nextTick(() => 
            this.vtextHeight = (document.getElementById(this.item.id).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
            console.log("next tick", this.vtextHeight);
        );
    ,

    updated() 
        this.vtextHeight = (document.getElementById(this.item.id).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
        console.log("updated", this.vtextHeight);
    ,

    created () 
        var page = this;
        var itemId = this.item.id;

        window.addEventListener('load', () => 
            page.vtextHeight = (document.getElementById(itemId).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
            console.log("on load");
        );
        window.addEventListener('resize', () => 
            page.vtextHeight = (document.getElementById(itemId).offsetHeight - document.getElementsByClassName("v-card__title")[0].offsetHeight) + 'px';
            console.log("resize", page.vtextHeight);
        );
    

在页面加载时：

“加载中”永远不会被记录 “next tick 117px”和“updated 117px”被记录，但这比我预期的要小

在 1px 窗口调整大小：

“resize 278px”和“updated 278px”被记录，这是我期望的值。

【问题讨论】：

您的模板是什么样的？您要查询哪种元素？

我正在使用 Vuetify 的 v-card、v-card-title 和 v-card 文本。 v-card 位于我正在使用的依赖项创建的 div 中，但它具有设置的宽度和高度，并且 id 存储在 this.item.id 中。我想让 v-cart-text 可滚动，但我似乎只能通过将 v-card 文本的高度设置为 div 的高度减去 v-card-title 来做到这一点

【参考方案1】：

您可以使用 vue 特定的 ref 方法来访问 DOM 元素。

例如：

 <div class="v-card__title" ref="vCard" :style="'width': '100px', 'height': '200px'"> 

像这样访问元素高度，

this.$refs.vCard.offsetHeight + 'px';

你可以学习参考属性here

查看类似的堆栈溢出问题Get element height with Vuejs here。

【讨论】：

第一次渲染页面时仍然显示 117px。我不知道它的大小是从哪里来的。

我实际上查看了错误的控制台日志，但我在使用 $refs 时遇到了问题。我登录：var cardRef = 'card-' + itemId; console.log("getting card height of: " + cardRef); console.log("refs again", this.$refs); console.log("ref card: ", this.$refs[cardRef]); 打印，我得到：getting card height of: card-XEQxYe7e refs again card-XEQxYe7e: [VueComponent] card-0MG4FiRWN: [VueComponent] card-42r-tHs6L: [VueComponent] card-e5_Ip9gj: [VueComponent] __proto__: Object ref card: undefined 当我将鼠标悬停在名称上时，它显示“card-XEQxYe7e”。为什么是 4 个引号？

另外，我在 v-card 中的代码是：:ref="'card-' + item.id"

按照这里所做的：forum.vuejs.org/t/… 我发现 refs 尚未填充，但我在 mount() 中调用代码所以我不明白我做错了什么.

所以删除 '-' 似乎可行，现在我可以正确获取 ref，但 this.$refs[cardRef][0].clientHeight 未定义