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

Answer 1

你这样做的方式很好。但是还有另一种 vue 特定方式通过

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

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

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

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

时有效

Answer 3

我会使用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>

Answer 4

仅供参考 - 访问 $el 也有问题（未定义）。使用 vue/typescript - 以下工作正常：

console.log('scriptPanel: mounted: sizes: ', (this.$refs.scriptSheet! as any).$el.clientHeight)

Answer 5

在我的例子中，它按照以下路径找到了 clientHeight

this.$refs.infoBox.$el.nextElementSibling.clientHeight

Answer 6

Vue >= 2.7 更新

使用 Composition API，您可以通过

VueUse

中的 getElementSize 获取反应高度，如 vuejs.org docs

中所述

import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'

export default {
  setup() {
    const el = ref(null)
    const { height } = useElementSize(el)

    return {
      height,
    }
  }
}

或

<script setup>
import { ref } from 'vue'
import { useElementSize } from '@vueuse/core'

const el = ref(null)
const { height } = useElementSize(el)
</script>

使用Vuejs获取元素高度

问题描述投票：0回答：6

6个回答

更新

最新问题

使用Vuejs获取元素高度

问题描述 投票：0回答：6

6个回答

更新

最新问题

问题描述投票：0回答：6