Vue获取元素高度

一、使用ref获取元素节点

在Vue中，我们可以使用ref获取组件或元素节点。通过ref，我们可以访问到该节点的所有属性和方法，包括它的高度。

<template>
  <div ref="box">
    我是一个盒子
  </div>
</template>

<script>
export default {
  mounted() {
    const height = this.$refs.box.clientHeight;
    console.log(height);
  }
};
</script>

使用ref获取节点的高度非常简单，只需要在mounted钩子函数中使用this.$refs来获取节点，然后通过clientHeight属性获取它的高度即可。

二、使用computed计算元素高度

在Vue中，我们可以使用计算属性（computed）来动态计算元素的高度。通过计算属性，在元素的宽度或高度发生变化时，我们可以自动重新计算元素的高度。

<template>
  <div :style="{ height: boxHeight + 'px' }" ref="box">
    我是一个高度自适应的盒子
  </div>
</template>

<script>
export default {
  computed: {
    boxHeight() {
      return this.$refs.box.clientHeight;
    }
  }
};
</script>

使用计算属性的方式来获取元素高度相比使用ref来获取元素高度更加灵活，通过计算属性，我们可以根据元素的宽度或者其他属性来动态计算元素的高度。

三、使用自定义指令获取元素高度

在Vue中，我们还可以使用自定义指令来获取元素的高度。通过自定义指令，我们可以在元素被插入到文档中后立即执行计算高度的操作。

<template>
  <div v-height-adapt>
    我是一个高度自适应的盒子
  </div>
</template>

<script>
export default {
  directives: {
    'height-adapt': {
      inserted: function(el) {
        el.style.height = el.clientHeight + 'px';
      }
    }
  }
};
</script>

使用自定义指令的方式可以让我们在元素被插入到文档中后立即执行计算高度的操作，从而保证元素的高度是最新的。

四、使用第三方库获取元素高度

除了以上几种方法，我们还可以使用第三方库来获取元素的高度。下面是一个示例，我们使用了一个名为get-size.js的第三方库来获取元素的高度。

<template>
  <div ref="box">
    我是一个盒子
  </div>
</template>

<script>
import getSize from 'get-size';

export default {
  mounted() {
    const size = getSize(this.$refs.box);
    console.log(size.height);
  }
};
</script>

使用第三方库可以让我们更加方便地获取元素的高度，避免了重复代码，同时也可以提高代码的可读性和可维护性。