vue3获取视口高度

您可以使用`window.innerHeight`来获取视口的高度。在Vue 3中，您可以在组件的`mounted`生命周期钩子函数中使用这个属性来获取视口的高度。下面是一个示例代码：

<template>
  <div>
    <p>视口高度：{{ viewportHeight }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      viewportHeight: 0
    };
  },
  mounted() {
    this.viewportHeight = window.innerHeight;
  }
};
</script>

在上面的示例中，`window.innerHeight`会在组件挂载后被赋值给`viewportHeight`，然后在模板中显示出来。

相关问题

vue3获取元素到视口顶部高度

在 Vue 3 中，你可以使用 `ref` 创建一个对元素的引用，并使用 `window.scrollY` 获取视口的滚动高度，从而计算元素到视口顶部的距离。

首先，你需要在组件中使用 `ref` 创建一个对元素的引用。例如，你可以在 `mounted` 钩子中获取元素的引用：

<template>
  <div ref="elementRef">Hello, world!</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const elementRef = ref(null);

    onMounted(() => {
      // 在组件挂载后获取元素的引用
      console.log(elementRef.value);
    });

    return {
      elementRef
    };
  }
};
</script>

然后，你可以在需要的时候计算元素到视口顶部的距离。例如，在滚动时触发一个函数来计算距离：

<template>
  <div ref="elementRef">Hello, world!</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const elementRef = ref(null);

    onMounted(() => {
      // 在组件挂载后获取元素的引用
      console.log(elementRef.value);

      window.addEventListener('scroll', handleScroll);
    });

    const handleScroll = () => {
      const elementTop = elementRef.value.offsetTop;
      const viewportTop = window.scrollY;
      const distanceToViewportTop = elementTop - viewportTop;

      console.log(distanceToViewportTop);
    };

    return {
      elementRef
    };
  }
};
</script>

在 `handleScroll` 函数中，我们计算了元素顶部相对于视口顶部的距离，并将其打印到控制台。你可以根据需要使用这个距离进行进一步的操作。

vue2 获取页面高度

在Vue.js 2.x中获取页面高度，通常是在组件需要动态调整布局时，例如滚动监听、窗口大小变化响应等场景。你可以使用JavaScript的`window.innerHeight`属性来获取视口的高度。这里有一个简单的示例：

export default {
  data() {
    return {
      viewportHeight: null,
    };
  },
  mounted() {
    this.viewportHeight = window.innerHeight; // 页面加载后获取初始高度
    window.addEventListener('resize', () => { // 监听窗口尺寸变化
      this.viewportHeight = window.innerHeight;
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateViewport); // 移除事件监听
  },
  methods: {
    updateViewport() {
      this.viewportHeight = window.innerHeight; // 更新页面高度到最新的值
    },
  },
};

在这个例子中，我们在组件挂载（mounted）时获取初始视口高度，并添加一个窗口大小改变（resize）的事件监听器。当窗口大小发生变化时，会调用`updateViewport`方法更新页面高度。在组件销毁（beforeDestroy）时移除这个监听器。