vue3 element plus 走马灯纵向滚动鼠标滚动

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

vite2+vue3+ts element plus 走马灯纵向滚动鼠标滚动

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、html部分

<div style="height: 937px" @mousewheel="rollScroll($event)">
      <el-carousel height="937px" direction="vertical" :autoplay="false" trigger="click" ref="carousel"
        class="homecarousel" @mousewheel="rollScroll($event)">
        <el-carousel-item class="item">

        </el-carousel-item>
        <el-carousel-item class="item">


        </el-carousel-item>
        <el-carousel-item class="item">


        </el-carousel-item>
        <el-carousel-item class="item">


        </el-carousel-item>
        <el-carousel-item class="item">
        
        </el-carousel-item>
      </el-carousel>
    </div>

二、ts部分

1.滚动事件

let timeOut: any = null
function rollScroll(event: any) {
  let scrollVal = event.wheelDelta || event.detail
  if (!timeOut) {
    timeOut = setTimeout(() => {
      timeOut = null
      scrollVal > 0 ? carousel.value.prev() : carousel.value.next()
    }, 300);
  } else {

  }
}

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，简单记录一下