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>

使用第三方庫可以讓我們更加方便地獲取元素的高度，避免了重複代碼，同時也可以提高代碼的可讀性和可維護性。