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 2中，如果你想获取某个元素的实际可视高度，可以使用`getBoundingClientRect()`方法，它返回一个表示元素位置和尺寸的对象[^1]。以下是示例：

// 假设你有一个Vue组件内的ref绑定到DOM元素
let elementRef = this.$refs.myElement;

// 使用elementRef来获取可视区域的高度
const rect = elementRef.getBoundingClientRect();
const visibleHeight = rect.bottom - rect.top; // 这里得到了元素顶部到底部的可视部分高度

console.log("可视高度:", visibleHeight);

然而，如果你关心的是元素内容（不包括可能的滚动条）的总高度，即使部分内容未显示在视口中，可以考虑使用`scrollHeight`属性，它会返回元素内容的总高度，包括可能的溢出。

let contentHeight = elementRef.scrollHeight;
console.log("内容高度:", contentHeight);