useVh方法

由于移动端使用vh会有兼容问题，因为vh不包含地址栏和工具栏的高度，当使用100vh的时候，如果出现了地址栏和工具栏。会导致容器的内容被挤下去，导致出现滚动条
通过window.innerHeight动态计算视口的高度
设置css变量，把动态计算好的高度，赋值给这个css变量，让css文件可以直接使用

useVh

ts
// useVh.ts
import { onMounted, onUnmounted } from 'vue'

export function useVh() {
  let timer: NodeJS.Timeout | null = null

  const setVh = () => {
    // 清除防抖定时器
    if (timer)
      clearTimeout(timer)

    // 延迟执行，避免横竖屏切换时浏览器尺寸抖动
    timer = setTimeout(() => {
      const vh = window.innerHeight * 0.01
      document.documentElement.style.setProperty('--vh', `${vh}px`)
    }, 100)
  }

  onMounted(() => {
    setVh()

    // 监听窗口尺寸变化（包括软键盘弹出、收起）
    window.addEventListener('resize', setVh)

    // 监听屏幕方向变化（横竖屏切换）
    window.addEventListener('orientationchange', setVh)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', setVh)
    window.removeEventListener('orientationchange', setVh)
    if (timer)
      window.clearTimeout(timer)
  })
}

使用

动态计算 + 优雅降级
当--vh变量不存在时，使用1vh备用值

css
 height: calc(var(--vh, 1vh) * 100);

useVh​

使用​

useVh

使用