Question

我想获得div的高度，以便使另一个div的高度与之匹配。我使用了clientHeight方法，但它并没有给我带来好的值（较小的值）。实际上，它似乎在所有元素被充电之前返回一个高度。经过网上的一些研究，我试图把一个window.load（）推迟到一切都收费但是它也不起作用。一些想法？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

你这样做的方式很好。但是通过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

<强>更新

有些人留下评论说上述解决方案对他们没有用。该解决方案提供了概念但未提供完整的工作代码作为示例，因此我使用下面的代码扩充了我的答案，该代码演示了这些概念。

＆＃13;

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();
    }

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

以下是浏览器中结果的屏幕截图：

Answer 2

花很多时间⌚解决问题。最初，我尝试遵循Ron C的回答。尝试获取this.$refs.infoBox.clientHeight;无效，它没有定义。

然后，我探索了this.$refs.infoBox对象。

哇！我不知道他编写的代码如何为他和所有其他人工作，但是没有称为clientHeight的属性。最终将其放入$el中。

因此我们需要将this.$refs.infoBox.clientHeight;替换为this.$refs.infoBox.$el.clientHeight;

这对我来说很好。

Answer 3

我会使用flexbox来实现相同高度的列 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

＆＃13;

.container {
   display: flex;
}
.column {
   border: 1px solid;
   padding: 20px;
   width: 150px;
}

＆＃13;

<!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>

＆＃13;

使用Vuejs获取元素高度

3 个答案: