Javascript 使用 Vuejs 获取元素高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44948714/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get element height with Vuejs
提问by Juliane Blier
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 ?
我想获得一个 div 的高度，以使另一个 div 的高度与其匹配。我使用了 clientHeight 方法，但它没有给我返回好的值（较小的值）。实际上，它似乎在所有元素都被充电之前返回一个高度。在网上进行了一些研究后，我尝试将 window.load() 延迟到所有内容都已收费但效果不佳。一些想法？
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>回答by Ron C
The way you are doing it is fine. But there is another vue specific way via a refattribute.
你这样做的方式很好。但是通过ref属性还有另一种 vue 特定的方式。
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 getElementByIdapproach or the vue specific refapproach. However if you were setting the value on the element then it's much better to use the refapproach 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.
在这种情况下，由于您只是获得了价值，因此使用原始getElementById方法还是 vue 特定ref方法实际上并不重要。但是，如果您在元素上设置值，那么最好使用该ref方法，以便 vue 了解该值已更改，并且如果需要更新 DOM 中的该节点，则不可能用原始值覆盖该值。
You can learn more here: https://vuejs.org/v2/api/#vm-refs
你可以在这里了解更多：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/[email protected]/dist/vue.min.js"></script>
Here is a screenshot of the results in the browser:
下面是浏览器中结果的截图：
回答by drimbo
I would use flexbox to achieve equal height columns https://css-tricks.com/snippets/css/a-guide-to-flexbox/
我会使用 flexbox 来实现等高的列 https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.container {
display: flex;
}
.column {
border: 1px solid;
padding: 20px;
width: 150px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ac dui sed erat venenatis fermentum. Nulla tempus, magna
sit amet ornare fringilla, ligula quam faucibus urna
</div>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</body>
</html>回答by mayank1513
Tool a lot of time ? resolving the issue. Initially I tried to follow answer by Ron C. Trying to get this.$refs.infoBox.clientHeight;just didn't work - it gave undefined.
工具很多时间？解决问题。最初我试图按照Ron C 的回答。试图得到this.$refs.infoBox.clientHeight;只是没有用 - 它给出了未定义的。
Then I explored the this.$refs.infoBoxobject.
然后我探索了这个this.$refs.infoBox物体。
Wow!!! I don't know how the code he wrote works for him and all others, but there wasn't any property called clientHeight. Finally got it inside $el.
哇！！！我不知道他写的代码是如何为他和所有其他人工作的，但没有任何名为clientHeight. 终于拿到里面了$el。
so we need to replace this.$refs.infoBox.clientHeight;with this.$refs.infoBox.$el.clientHeight;
所以我们需要替换this.$refs.infoBox.clientHeight;为this.$refs.infoBox.$el.clientHeight;
This just worked well for me.
这对我来说效果很好。
