使用Vuejs获取元素高度

我想获得div的高度，以便使其他div的高度与其匹配。我使用了方法clientHeight，但它不会返回给我的好值（较小的值）。实际上，在所有元素被收费之前，它似乎都会返回一个高度。经过一些在线研究，我试图放置一个window.load（）来延迟，直到所有东西都被充电，但它不起作用。一些想法？使用Vuejs获取元素高度

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>

来源

2017-07-06 Juliane Blier

https://stackoverflow.com/a/526352/2316112 –

你能创建一个再生产？它似乎工作得很好：https：//jsfiddle.net/wostex/63t082p2/84/（如果你从你的方法当然返回高度，因为在你的代码中你什么都不返回）。 – wostex

其实我的组件有很多线条和方法。我在这里简化了它。但我不明白为什么它返回的数字小于实际高度（检查元素时）。这是一个加载问题吗？不应该加载时运行该方法吗？ –

你正在做它的方式是好的。但是通过ref属性还有另外一种具体的方法。

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>

在这种情况下，因为你是刚刚起步的价值真的不要紧，你是否使用原来的getElementById方法或VUE具体ref方法。但是，如果您在元素上设置值，那么使用ref方法好得多，这样vue就会明白该值已更改，并且如果需要更新DOM中的该节点，则不会使用原始值覆盖该值。

您可以在这里了解更多：https://vuejs.org/v2/api/#vm-refs

更新

有几个人已经离开评论说，上述方案并没有为他们工作。该解决方案提供了概念，但没有提供完整的工作代码作为示例，所以我用下面的代码展示了我的答案，它演示了这些概念。

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/[email protected]/dist/vue.min.js"></script>

这里是在浏览器中结果的截图：

来源

2017-07-06 12:53:54

谢谢，我试过你的解决方案，但同样的问题。我注意到包含列表的div没有被考虑在内。它只会返回图像的高度。但列表中有一个v-if =“someVariable”，这似乎是原因，不是？ –

什么问题？ –

该列表未被考虑。好像它没有被显示，但它是。 –

使用Vuejs获取元素高度

回答

相关问题