使用 Vuejs 获取元素高度

Question

我想获得一个 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>

原文由 Juliane Blier 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

笔记：

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

原文由 RonC 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

花了很多时间 ⌚ 解决了这个问题。最初我试图遵循 Ron C 的回答。试图获得 this.$refs.infoBox.clientHeight; 只是没有用 - 它给出了未定义。

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

哇！！！我不知道他编写的代码如何为他和所有其他人工作，但没有任何名为 clientHeight 的属性。终于在里面找到了 $el 。

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

这对我来说效果很好。

更新

使用 nuxt this.$refs.infoBox.$el.clientHeight; 没有用。但 Ron C 的回答适用于这种情况。 this.$refs.infoBox.$el.clientHeight; 使用时似乎有效 @vue/cli

原文由 mayank1513 发布，翻译遵循 CC BY-SA 4.0 许可协议