vue3中鼠标滚轮控制swiper垂直切换

可以使用`swiper`的`direction`属性将其设置为垂直方向，然后通过监听`wheel`事件来控制滚轮滚动时切换`swiper`的页面。

示例代码如下：

<template>
  <div class="swiper-container" ref="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
    </div>
  </div>
</template>

<script>
  import Swiper from 'swiper';
  import 'swiper/swiper-bundle.css';

  export default {
    mounted() {
      const swiper = new Swiper(this.$refs.swiper, {
        direction: 'vertical',
      });

      this.$refs.swiper.addEventListener('wheel', (event) => {
        event.preventDefault();
        if (event.deltaY < 0) {
          swiper.slidePrev();
        } else if (event.deltaY > 0) {
          swiper.slideNext();
        }
      });
    },
  };
</script>

在上面的代码中，我们首先引入了`swiper`库，并设置了`swiper`的`direction`属性为`vertical`以实现垂直滑动。然后在组件的`mounted`钩子函数中，我们创建了一个`swiper`实例，并通过`addEventListener`方法监听了`wheel`事件。当鼠标滚轮向上滚动时，调用`swiper.slidePrev()`方法切换到上一个页面；当鼠标滚轮向下滚动时，调用`swiper.slideNext()`方法切换到下一个页面。需要注意的是，在`wheel`事件中需要调用`preventDefault`方法阻止默认的滚动行为。