使用Vuejs获取元素高度
Jul*_*ier 16 html javascript vue.js vue-component vuejs2
我想获得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>Ron*_*n C 31
你这样做的方式很好.但是通过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>
在这种情况下,由于您只是获得了价值,因此无论您使用的是原始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/vue@2.2.5/dist/vue.min.js"></script>
以下是浏览器中结果的屏幕截图:
may*_*513 12
花了很多时间？解决问题。最初我试图按照Ron C 的回答。试图得到this.$refs.infoBox.clientHeight;只是没有用 - 它给出了未定义的。
然后我探索了这个this.$refs.infoBox物体。
哇！！！我不知道他写的代码是如何为他和所有其他人工作的，但没有任何名为clientHeight. 终于拿到里面了$el。
所以我们需要替换this.$refs.infoBox.clientHeight;为this.$refs.infoBox.$el.clientHeight;
这对我来说效果很好。
更新
使用 nuxtthis.$refs.infoBox.$el.clientHeight;时不起作用。但Ron C的答案适用于这种情况。this.$refs.infoBox.$el.clientHeight;似乎在使用时工作@vue/cli
小智 5
我会使用 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>| 归档时间： |
|
| 查看次数： |
47753 次 |
| 最近记录： |