vue2 js获取窗口高度 方法

在Vue.js中，如果你想获取浏览器窗口的高度，你可以创建一个计算属性或者在一个组件的生命周期钩子函数里动态地获取。这里提供两种常见的方法：

1. **计算属性**:

<template>
  <div ref="windowRef"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  computed: {
    windowHeight() {
      const win = this.$refs.windowRef;
      if (win) {
        return win.clientHeight; // 或者使用 innerHeight 获取滚动可视区高度
      }
      return null; // 初始化时返回null，待窗口渲染后再获取
    }
  }
}
</script>

在这个例子中，`ref`用于在模板元素上设置一个引用，然后在计算属性`windowHeight`中访问这个引用的`clientHeight`。

2. **mounted 生命周期钩子**:

<template>
  <div></div>
</template>

<script>
export default {
  mounted() {
    this.$nextTick(() => {
      this.windowHeight = this.$el.clientHeight; // 或者使用 $el.offsetHeight
    });
  },
  data() {
    return { windowHeight: null };
  }
};
</script>

`$nextTick`确保在DOM更新之后再获取窗口高度，避免了在初始化阶段获取到未完成渲染的高度值。