vue获取div高度

// 在 Vue 组件中获取 div 的高度

<template>
  <div ref="myDiv" @resize="handleResize">
    <!-- 这里是你的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      divHeight: 0
    };
  },
  mounted() {
    // 组件挂载完成后，获取 div 的高度
    this.updateDivHeight();
    // 监听窗口大小变化，以便更新 div 的高度
    window.addEventListener('resize', this.updateDivHeight);
  },
  beforeDestroy() {
    // 移除监听器，防止内存泄漏
    window.removeEventListener('resize', this.updateDivHeight);
  },
  methods: {
    updateDivHeight() {
      // 使用 this.$refs 获取 DOM 元素，并读取其 clientHeight 属性
      if (this.$refs.myDiv) {
        this.divHeight = this.$refs.myDiv.clientHeight;
        console.log('Div 高度:', this.divHeight);
      }
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要自定义 */
</style>

解释说明：

1. ref="myDiv"：通过 ref 属性为 div 元素设置一个引用名称 myDiv，这样我们可以在 Vue 实例中通过 this.$refs.myDiv 来访问该元素。
2. mounted()：在组件挂载完成后调用 updateDivHeight 方法，获取 div 的初始高度。
3. window.addEventListener('resize', this.updateDivHeight)：监听窗口大小的变化，当窗口大小改变时重新计算 div 的高度。
4. beforeDestroy()：在组件销毁之前移除事件监听器，防止内存泄漏。
5. updateDivHeight()：这个方法用于获取 div 的当前高度，并将其存储在 data 中的 divHeight 变量中。