用Vuejs获取元素高度 [英] Get element height with Vuejs

问题描述

我想得到一个div的高度，以使另一个div的高度与它匹配。我使用了方法clientHeight，但它不会返回给我的好值（较小的值）。实际上，在所有元素被收费之前，它似乎都会返回一个高度。
在网上进行了一些研究之后，我试图放一个window.load（）来延迟，直到所有东西都被充电，但它不能正常工作。一些想法？

< （）{let height = document.getElementById（'info-box'）。clientHeight}

 < div class =columns> < div class =left-columnid =context> < p>一些文字< / p> < / DIV> < div class =right-columnid =info-box> < img /> < UL>一些列表< / ul> < / div>< / div>  

解决方案

你这样做的方式很好。但是，通过 ref 属性还有另一种特定于vue的方式。

 挂载（）{
 this.matchHeight（）
}，
 matchHeight（）{
 let height = this。$ refs.infoBox.clientHeight; 
} 
  

 < div class =columns> 
< div class =left-columnid =context> 
< p>一些文字< / p> 
< / div> 
< div class =right-columnid =info-boxref =infoBox>< /> 
< img /> 
< ul> 
某些清单
< / ul> 
< / div> 
< / div> 
  

在这种情况下，由于您只是获得价值，所以您是否使用原始 getElementById 方法或特定于vue的 ref 方法。但是，如果您在元素上设置了值，那么使用 ref 方法会更好，这样vue就会明白该值已更改，并且不会覆盖该值如果需要更新DOM中的该节点，则为原始值。

您可以在此处了解更多信息：

I want to get the height of a div in order to make the height of another div matching it. I used the method clientHeight, but It doesn't return me the good value (smaller value). Actually, It seems to return a height before all elements are charged. After some research online, I tried to put a window.load() to delay until everything is charged but it doesn't work as well. Some ideas ?

mounted () {
  this.matchHeight()
},
matchHeight () {
  let height = document.getElementById('info-box').clientHeight
}

<div class="columns">
  <div class="left-column" id="context">
  <p>Some text</p>
  </div>
  <div class="right-column" id="info-box">
    <img />
    <ul>
      some list
    </ul>
  </div>
</div>

解决方案

The way you are doing it is fine. But there is another vue specific way via a ref attribute.

 mounted () {
   this.matchHeight()
 },
 matchHeight () {
   let height = this.$refs.infoBox.clientHeight;
 }

    <div class="columns">
        <div class="left-column" id="context">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"></>
            <img />
            <ul>
                some list
            </ul>
        </div>
    </div>

In this case, since you are just getting the value it really doesn't matter whether you use your original getElementById approach or the vue specific ref approach. However if you were setting the value on the element then it's much better to use the ref approach so that vue understands that the value has changed and won't possibly overwrite the value with the original value if it needs to update that node in the DOM.

You can learn more here: https://vuejs.org/v2/api/#vm-refs

Update

A few people had left comments that the above solution didn't work for them. That solution provided the concepts but not full working code as example, so I have augmented my answer with the code below which demonstrates the concepts.

var app = new Vue({
    el: '#app',
    data: function () {
        return {
            leftColStyles: { },
            lines: ['one', 'two','three']
        }
    },
    methods: {
        matchHeight() {
            var heightString = this.$refs.infoBox.clientHeight + 'px';
            Vue.set(this.leftColStyles, 'height', heightString); 
        }
    },
    mounted() {
        this.matchHeight();
    }

});

.columns{width:300px}
.left-column {float:left; width:200px; border:solid 1px black}
.right-column {float:right; border:solid 1px blue; }

<div id="app">
    <div class="columns">
        <div class="left-column" id="context" v-bind:style="leftColStyles">
            <p>Some text</p>
        </div>
        <div class="right-column" id="info-box" ref="infoBox"> 
            <img />
            <ul>
                <li v-for="line in lines" v-text="line"></li>
            </ul>
        </div>
    </div>

</div>

 <script src="https://unpkg.com/vue@2.2.5/dist/vue.min.js"></script>
 

Here is a screenshot of the results in the browser:

这篇关于用Vuejs获取元素高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！