vue3+elementUI实现整屏轮播(鼠标滚轮控制)

　　一、创建vue3项目

　　二、引入elementUI：(推荐使用elementPlus)

　　　　- npm install element-plus --save

　　三、在main.js中引入 element-plus 并使用：(我这里全局使用，按需引入的小伙伴自己去官网)

    import ElementPlus from 'element-plus';
    import 'element-plus/lib/theme-chalk/index.css';

    const app = createApp(App)

    app.use(ElementPlus)

    app.use(store).use(router).mount('#app')

　　以上引入方法若报错：

　　　　运行：

　　　　- vue add element-plus

　　　　main.js引入:

    import installElementPlus from './plugins/element.js'

    const app = createApp(App)

    installElementPlus(app)

    app.use(store).use(router).mount('#app')

　　实现整屏轮播：

　　　　①：使用element走马灯

 1 <template>
 2   <div class="swiper-box">
 3     <el-carousel
 4       height="100vh"
 5       trigger="click"
 6       :loop="false"
 7       direction="vertical"
 8       :autoplay="false"
 9       ref="carousel"
10     >
11       <el-carousel-item v-for="item in 4" :key="item">
12         <h3 class="medium">{{ $t("el.colorpicker.confirm") }}</h3>
13       </el-carousel-item>
14     </el-carousel>
15   </div>
16 </template>

　　　　②：添加鼠标滚轮事件 @mousewheel

<template>
  <div class="swiper-box">
    <el-carousel
      height="100vh"
      trigger="click"
      :loop="false"
      direction="vertical"
      :autoplay="false"
      ref="carousel"
      @mousewheel="rollScroll"
    >
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="medium">{{ $t("el.colorpicker.confirm") }}</h3>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

    rollScroll(event) {
            let _that = this;
            let scrollVal = event.wheelDelta || event.detail;
            if(_that.scrollBox.time){
                clearTimeout(_that.scrollBox.time)
            }
            _that.scrollBox.time = setTimeout(() => {
                scrollVal>0?_that.$refs.carousel.prev():_that.$refs.carousel.next();
            }, 300);
    },

posted on 2021-01-07 14:37 有点小九九阅读(5131) 评论(0) 编辑收藏举报