vue3封装轮播图组件的方法

目的

封装轮播图组件，直接使用，具体内容如下

大致步骤

• 准备my-carousel组件基础布局，全局注册

• 准备home-banner组件，使用my-carousel组件，再首页注册使用。

• 深度作用选择器覆盖my-carousel组件的默认样式

• 在home-banner组件获取轮播图数据，传递给my-carousel组件

• 在my-carousel组件完成渲染

• 自动播放，暴露自动轮播属性，设置了就自动轮播

• 如果有自动播放，鼠标进入离开，暂停，开启

• 指示器切换，上一张，下一张

• 销毁组件，清理定时器
  

落地代码

一、封装组件

<template>
 <div class="my-carousel" @mouseenter="stop" @mouseleave="start">
   <ul class="carousel-body">
     <li v-for="(item, i) in findBannerList" :key="item.id" class="carousel-item" :class="{ fade: index === i }">
       <RouterLink to="/">
         <img :src="item.imgUrl" alt="图片" />
       </RouterLink>
     </li>
   </ul>
   <a @click="clickFn(-1)" href="javascript:;" class="carousel-btn prev"><i class="iconfont icon-angle-left"></i></a>
   <a @click="clickFn(1)" href="javascript:;" class="carousel-btn next"><i class="iconfont icon-angle-right"></i></a>
   <div class="carousel-indicator">
     <span @click="active(i)" v-for="(item, i) in findBannerList" :key="i" :class="{ active: index === i }"></span>
   </div>
 </div>
</template>

<script>
import { onUnmounted, ref, watch } from 'vue'
export default {
 name: 'Carousel',
 props: {
   findBannerList: {
     type: Array,
     default: () => []
   },
   autoplay: {
     type: Boolean,
     default: true
   },
   duration: {
     type: Number,
     default: 3
   }
 },
 setup(props) {
   const index = ref(0)
   // 定义一个常量存储定时器
   const timer = ref(null)
   // 定时器方法，实现自动轮播效果
   const autoplayFn = () => {
     // 防抖，防止多次触发定时器
     clearInterval(timer.value)
     timer.value = setInterval(() => {
       index.value += 1
       if (index.value >= props.findBannerList.length) {
         index.value = 0
       }
     }, props.duration * 1000)
   }
   // * ，根据接口返回的数据与传递的相关属性参数 autoplay 开启轮播
   // 监听返回的数据的长度，当长度大于1的时候并且 autoplay 的为 true 的时候开启轮播
   watch(
     () => props.findBannerList,
     () => {
       if (props.findBannerList.length > 1 && props.autoplay) {
         autoplayFn()
       }
     }
   )
   // 鼠标移入轮播图，停止自动播放
   const stop = () => {
     if (timer.value) clearInterval(timer.value)
   }
   // 鼠标移出轮播图，开启定时器
   const start = () => {
     if (props.findBannerList.length > 1 && props.autoplay) {
       autoplayFn()
     }
   }
   // 点击轮播图上的左右按钮，切换轮播图，通过传递进来的参数，决定轮播图往左往右
   const clickFn = e => {
     index.value += e
     if (index.value >= props.findBannerList.length) {
       index.value = 0
     }
     if (index.value < 0) {
       index.value = props.findBannerList.length - 1
     }
   }
   // 点击指示器（轮播图底下的小点）切换轮播图
   const active = e => {
     index.value = e
   }
   // 组件销毁的时候情书定时器，避免性能损耗
   onUnmounted(() => {
     if (timer.value) clearInterval(timer.value)
   })
   return { index, stop, start, clickFn, active }
 }
}
</script>
<style scoped lang="less">
.my-carousel {
 width: 100％;
 height: 100％;
 min-width: 300px;
 min-height: 150px;
 position: relative;
 .carousel {
   &-body {
     width: 100％;
     height: 100％;
   }
   &-item {
     width: 100％;
     height: 100％;
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
     transition: opacity 0.5s linear;
     &.fade {
       opacity: 1;
       z-index: 1;
     }
     img {
       width: 100％;
       height: 100％;
     }
   }
   &-indicator {
     position: absolute;
     left: 0;
     bottom: 20px;
     z-index: 2;
     width: 100％;
     text-align: center;
     span {
       display: inline-block;
       width: 12px;
       height: 12px;
       background: rgba(0, 0, 0, 0.2);
       border-radius: 50％;
       cursor: pointer;
       ~ span {
         margin-left: 12px;
       }
       &.active {
         background: #fff;
       }
     }
   }
   &-btn {
     width: 44px;
     height: 44px;
     background: rgba(0, 0, 0, 0.2);
     color: #fff;
     border-radius: 50％;
     position: absolute;
     top: 228px;
     z-index: 2;
     text-align: center;
     line-height: 44px;
     opacity: 0;
     transition: all 0.5s;
     &.prev {
       left: 20px;
     }
     &.next {
       right: 20px;
     }
   }
 }
 &:hover {
   .carousel-btn {
     opacity: 1;
   }
 }
}
</style>

二、封装成插件

import MyCarousel from './my-carousel.vue'
export default {
 install(app) {
   app.component(MyCarousel.name, MyCarousel)
 }
}

三、在入口文件 main.js 中全局注册

import { createApp } from 'vue'
import App from './App.vue'
import MyUI from './components/library'

// 插件的使用，在main.js使用app.use(插件)
createApp(App).use(MyUI).mount('#app')

四、在项目中使用组件

准备home-banner组件，使用my-carousel组件，然后在项目中使用轮播的地方引入 home-banner 组件， 下面的参数可以在 home-banner 组件中设置

findBannerList 参数作为，后台请求数据给到组件内部

autoplay 参数是否开启轮播，默认 true 开启轮播

duration 参数轮播停留时间间隔以 秒 为单位

<template>
 <div class="home-banner">
   <MyCarousel :findBannerList="findBannerList" :autoplay="true" :duration="3" />
 </div>
</template>

来源：https://blog.csdn.net/web00_11/article/details/120290805