vue3，监听屏幕高度变化

在Vue3中，要监听屏幕高度的变化，你可以使用`IntersectionObserver` API，这是一个现代浏览器支持的API，用于观察元素是否进入或离开视口。不过，在组件层面，我们需要利用自定义指令(`v-observer`)或者其他第三方库来简化操作。

以下是一个简单的示例，创建一个自定义指令`v-observer-screen`，用来监听屏幕高度变化：

<template>
  <div v-observer-screen="{ rootMargin: '0px', threshold: 0.5 }"></div> <!-- 使用指令 -->
</template>

<script setup>
import { use IntersectionObserver } from '@vue/observer-api'; // 引入Vue的IntersectionObserver

const observeScreen = ref(null);
const handleIntersection = (entries) => {
  if (entries.isIntersecting) {
    console.log('屏幕高度已变化');
    // 在这里添加处理屏幕高度变化的代码
  }
};

onMounted(() => {
  const observer = useIntersection(observeScreen.value, {
    rootMargin: '0px',
    threshold: 0.5, // 设置阈值，当超过50%进入视口时触发回调
  });
  observer.observe(document.documentElement); // 观察整个屏幕
});

onBeforeUnmount(() => {
  observer.unobserve(document.documentElement); // 移除观察
});
</script>

在这个例子中，我们在组件挂载时开始监听屏幕高度变化，并在元素进入视野时执行回调。记得导入并使用Vue的`useIntersection`钩子来自定义指令。