用Vue+Lenis+Tailwind实现顶栏随页面垂直滚动方向收缩

<template>
  <!-- 在项目中，这里的<VueLenis>组件应该放到app.vue -->
  <VueLenis root :options="lenisOptions">
    <header
      :data-direction="mosueDirection"
      :class="[
        'sticky top-0',
        'w-full h-10 bg-gray-400',
        'transition-transform duration-300 ease-in-out',
        'data-[direction=-1]:translate-y-0 data-[direction=1]:-translate-y-full',
      ]"
    >
      demo
    </header>
  </VueLenis>
</template>

<script setup lang="ts">
  import { type LenisOptions } from 'lenis'
  import { VueLenis, useLenis } from 'lenis/vue'

  const lenisOptions: LenisOptions = {
    smoothWheel: true,
  }

  /** 当前滚轮滚动方向，1向下，-1向上 */
  const scrollDirection = ref<number>(-1)

  useLenis(even => {
    mosueDirection.value = even.direction
    // useDPrint(`滚动方向`, even.direction)
  })
</script>