可以使用JavaScript中的window对象来获取浏览器窗口的高度,然后在Vue中使用。

下面是一个例子:


<template>
  <div>
    <p>浏览器窗口高度:{{ windowHeight }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      windowHeight: 0
    }
  },
  mounted() {
    this.getWindowHeight(); // 在初始化时获取窗口高度
    window.addEventListener('resize', this.getWindowHeight); // 在窗口大小改变时重新获取窗口高度
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getWindowHeight); // 组件销毁时移除resize事件监听器
  },
  methods: {
    getWindowHeight() {
      this.windowHeight = window.innerHeight;
    }
  }
}
</script>

在mounted钩子函数中添加resize事件监听器,并在事件回调函数中调用getWindowHeight方法来获取窗口高度并赋值给组件的windowHeight属性,在模板中展示窗口高度。在beforeDestroy钩子函数中移除resize事件监听器,以防止组件销毁时内存泄漏。

Logo

前往低代码交流专区

更多推荐