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

问题描述

我想获取一个 div 的高度，以便使另一个 div 的高度与其匹配.我使用了 clientHeight 方法，但它没有给我返回好的值(较小的值).实际上，它似乎在所有元素都被充电之前返回一个高度.在网上进行了一些研究后，我尝试将 window.load() 延迟到所有内容都已收费但效果不佳.一些想法?

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

<div class="left-column" id="context"><p>一些文字</p>
<div class="right-column" id="info-box"><img/><ul>一些清单

解决方案

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

 挂载 () {this.matchHeight()},匹配高度(){让高度 = this.$refs.infoBox.clientHeight;}

 
<div class="left-column";id="上下文"><p>一些文字</p>
<div class="right-column";id="信息框";ref="infoBox"></><img/><ul>一些清单

在这种情况下，由于您只是获取值，因此使用原始的 getElementById 方法还是 vue 特定的 ref 方法实际上并不重要.但是，如果您在元素上设置值，那么最好使用 ref 方法，以便 vue 了解该值已更改，并且在需要时不会用原始值覆盖该值更新 DOM 中的该节点.

你可以在这里了解更多:

注意:
我的回答假设您是从 cdn 或本地加载 vue.js 到浏览器并在那里执行它.相反，如果您通过 cli 运行代码而我的回答对您不起作用，请参阅 @mayank1513 的答案.

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.6.12/dist/vue.min.js"></script>
 

Here is a screenshot of the results in the browser:

Note:
My answer assumes that you are loading vue.js from a cdn or locally into the browser and executing it there. If instead you are running your code via the cli and my answer is not working for you, please see @mayank1513's answer instead.

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