Vue.js 中如何获取组件元素的 offsetHeight? [英] How Do I Get The offsetHeight of a Component Element in Vue.js?

问题描述

我正在使用 Vue.js 创建一个组件，并将其插入到 DOM 中，没有任何问题.一旦元素在 DOM 中，我想知道它的渲染高度 - 即，我想获得它的 offsetHeight.我不知道该怎么做 - 我一定遗漏了一些非常明显的东西.这是我试过的:

HTML:

<div id="我的应用程序"><我的组件></我的组件>

<!-- 组件模板--><模板 id="我的组件"><h1>你好世界</h1><p>Lorem ipsum dolor sat amet.</h1><pre>{{ myheight }}</pre></模板>

Vue Javascript:

Vue.component('my-component',{模板:'#我的组件'，计算:{我的高度:函数(){返回 this.offsetHeight;}}});Vue({ el: '#my-app' });

但它不起作用 - 'myheight' 最终为空.我想可能问题在于它可能在将计算属性插入到 DOM 之前尝试生成它，所以我没有使用计算属性，而是尝试了这个:

Vue.component('my-component',{模板:'#我的组件'，数据:函数(){返回 {我的身高:999};},准备好:函数(){this.myheight = this.offsetHeight;}});

同样，它不起作用 - 它不输出任何内容 - 而且我在控制台中没有收到任何错误或警告.

然后，我想也许this不是一个HTMLElement，于是我搜索了Vue文档，发现所有的Vue实例都应该有一个$el属性，指向到 HTMLElement - 或者至少我是这么理解的......所以我尝试在上面的两个例子中使用 this.$el.offsetHeight ，但同样没有成功.

有人能指出我正确的方向吗?感谢所有帮助...

解决方案

问题似乎出在您的模板中.您似乎有一个 fragment 实例，这意味着您没有顶部围绕所有子级的 level 元素.

所以不是这个，$el 可能不是指你想要的......

<模板 id="我的组件"><h1>你好世界</h1><p>Lorem ipsum dolor sat amet.</h1><pre>{{ myheight }}</pre></模板>

...你可以将你的组件包装在一个父元素中:

<模板 id="我的组件"><div class="my-component"><h1>你好世界</h1><p>Lorem ipsum dolor sat amet.</p><!-- 并正确关闭标签--><pre>{{ myheight }}</pre>

</模板>

然后你可以使用this.$el.offsetHeight获得偏移高度:

Vue.component('my-component',{模板:'#我的组件'，数据:函数(){返回 {我的身高:999};},准备好:函数(){this.myheight = this.$el.offsetHeight;}});new Vue({ el: '#my-component' });

I'm creating a component using Vue.js, and inserting it into the DOM without any problems. Once the element is in the DOM, I'd like to know its rendered height - i.e., I'd like to get its offsetHeight. I can't work out how to do it - I must be missing something really obvious. This is what I've tried:

The HTML:

<!-- vue instance -->
<div id="my-app">

    <my-component></my-component>

</div>

<!-- component template -->
<template id="my-component">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet.</h1>
    <pre>{{ myheight }}</pre>
</template>

The Vue Javascript:

Vue.component('my-component',{
    template: '#my-component',
    computed: {
        myheight: function(){
            return this.offsetHeight;
        }
    }
});

Vue({ el: '#my-app' });

But it doesn't work - 'myheight' ends up empty. I thought that maybe the problem was that it might have been trying to generate the computed property before it had been inserted into the DOM, so instead of using a computed property I tried this:

Vue.component('my-component',{
    template: '#my-component',
    data: function(){
        return {
            myheight: 999
        };
    },
    ready: function(){
        this.myheight = this.offsetHeight;
    }
});

Again, it doesn't work - it outputs nothing - and I don't get any errors or warnings in the console.

Then, I thought that maybe this was not an HTMLElement, so I searched the Vue documentation, and found that all Vue instances should have an $el property that points to the HTMLElement - or at least that's how I understood it... So I tried using this.$el.offsetHeight in both examples above, but again with no success.

Can someone point me in the right direction? All assistance is appreciated...

解决方案

It looks like the issue lies in your template. You seem to have a fragment instance, meaning that you don't have a top level element that surrounds all the children.

So instead of this, where $el is likely not to refer to what you want…

<!-- component template -->
<template id="my-component">
    <h1>Hello World</h1>
    <p>Lorem ipsum dolor sit amet.</h1>
    <pre>{{ myheight }}</pre>
</template>

…you could wrap your component in a parent element:

<!-- component template -->
<template id="my-component">
    <div class="my-component">
        <h1>Hello World</h1>
        <p>Lorem ipsum dolor sit amet.</p> <!-- and close the tag correctly -->
        <pre>{{ myheight }}</pre>
    </div>
</template>

Then you can get the offset-height using this.$el.offsetHeight:

Vue.component('my-component',{
    template: '#my-component',
    data: function(){
        return {
            myheight: 999
        };
    },
    ready: function(){
        this.myheight = this.$el.offsetHeight;
    }
});

new Vue({ el: '#my-component' });

这篇关于Vue.js 中如何获取组件元素的 offsetHeight?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！