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

Question

我正在尝试获取元素的高度。如果我尝试过早获取它，高度为 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”被记录下来，这是我期望的值。

标签： javascripthtmlvue.js

Answer 1

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

例如 ：

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

像这样访问元素高度，

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

你可以在这里学习 ref 属性

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