vue3＜setup＞中监控整个页面鼠标滚轮是向上还是向下滚动

在 Vue 3 的 <script setup> 语法中，你可以使用 ref 来创建一个响应式引用，并在 onMounted 和 onBeforeUnmount 生命周期钩子中分别添加和移除鼠标滚轮事件的监听器。下面是一个如何在 Vue 3 的 <script setup> 中监控整个页面鼠标滚轮是向上还是向下滚动的示例：

<template>  
  <div>  
    <!-- 你的页面内容 -->  
  </div>  
</template>  
  
<script setup>  
import { ref, onMounted, onBeforeUnmount } from 'vue';  
  
const scrollDirection = ref(null); // 用于存储滚动方向的响应式引用  
  
// 处理滚轮事件的方法  
const handleWheel = (event) => {  
  const deltaY = event.deltaY;  
  if (deltaY < 0) {  
    scrollDirection.value = 'up'; // 向上滚动  
  } else if (deltaY > 0) {  
    scrollDirection.value = 'down'; // 向下滚动  
  }  
};  
  
// 在组件挂载后添加监听器  
onMounted(() => {  
  window.addEventListener('wheel', handleWheel);  
});  
  
// 在组件卸载前移除监听器  
onBeforeUnmount(() => {  
  window.removeEventListener('wheel', handleWheel);  
});  
</script>

在这个例子中，scrollDirection 是一个响应式引用，它会在鼠标滚轮事件触发时更新其值。handleWheel 方法检查 event.deltaY 的值来确定滚动的方向，并更新 scrollDirection 的值。

onMounted 钩子在组件挂载到 DOM 后调用，此时我们添加 wheel 事件的监听器到 window 对象上。onBeforeUnmount 钩子在组件卸载之前调用，此时我们移除该监听器，以避免内存泄漏。

现在你可以在模板或其他计算属性中使用 scrollDirection 的值来根据滚动方向执行相应的逻辑。例如，你可以在模板中显示一个消息来指示滚动方向：

<template>  
  <div>  
    <p v-if="scrollDirection === 'up'">你正在向上滚动</p>  
    <p v-if="scrollDirection === 'down'">你正在向下滚动</p>  
    <!-- 你的页面内容 -->  
  </div>  
</template>

请注意，deltaY 的值可能因浏览器和设备的不同而有所差异，但通常它的符号（正或负）足以确定滚动的方向。如果你需要更精确的滚动距离或速度，可能需要进一步处理 event.deltaY 的值。