Vue3系列--手动封装一个轮播图组件__前端__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

今天这篇文章讲一下，vue3的项目里当我们需要使用轮播图的时候，如何通过自己手动封装的方式来实现轮播效果。

目的： 封装轮播图组件,第一步：基础结构的使用。

大致步骤：

准备shop-carousel组件基础布局，全局注册
准备home-banner组件，使用shop-carousel组件，再首页注册使用。
深度作用选择器覆盖shop-carousel组件的默认样式 1.轮播图基础结构 src/components/library/shop-carousel.vue

<template>
  <div class='shop-carousel'>
    <ul class="carousel-body">
      <li class="carousel-item fade">
        <RouterLink to="/">
          <img src="">
        </RouterLink>
      </li>
    </ul>
    //左右两个小按钮
    <a href="javascript:;" class="carousel-btn prev">
        <i class="iconfont icon-angle-left"></i>
    </a>
    <a href="javascript:;" class="carousel-btn next">
        <i class="iconfont icon-angle-right"></i>
    </a>
    //这里是中间区域的5个小圆点
    <div class="carousel-indicator">
      <span v-for="i in 5" :key="i"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XtxCarousel'
}
</script>
<style scoped lang="less">
.shop-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,.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>

2.全局注册轮播图 src/components/library/index.js

import ShopCarousel from './shop-carousel.vue'

export default {
  install (app) {
    app.component(ShopCarousel.name, ShopCarousel)

  }
}

3.首页广告组件基础结构 src/views/home/components/home-banner.vue

<template>
  <div class="home-banner">
    <XtxCarousel />
  </div>
</template>
<script>
export default {
  name: 'HomeBanner'
}
</script>
<style scoped lang="less">
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98
}
</style>

4.首页使用广告组件

<template>
  <!-- 首页入口 -->
  <div class="home-entry">
    <div class="container">
      <!-- 轮播图 -->
      <HomeBanner />
    </div>
  </div>
</template>
<script>
import HomeBanner from './components/home-banner'
export default {
  name: 'HomePage',
  components: {
    HomeBanner
  }
}
</script>
<style scoped lang="less"></style>

5.覆盖轮播图组件样式 src/views/home/components/home-banner.vue

.ahop-carousel {
  ::v-deep .carousel-btn.prev {
    left: 270px;
  }
  ::v-deep .carousel-indicator {
    padding-left: 250px;
  }
}

封装通用轮播图组件 shop-carousel

封装业务组件 home-banner

在业务组件中定制通用组件的样式（不可以直接修改通用组件的样式）

注意：需要注意要覆盖样式，首页轮播图有特殊布局要求。

深度选择器需要添加到组件根节点之内的DOM元素的选择器上（组件根节点样式不需要添加深度选择器）

目的： 封装轮播图组件，第二步：动态渲染结构。

大致步骤：

定义获取广告图API函数
在home-banner组件获取轮播图数据，传递给shop-carousel组件
在shop-carousel组件完成渲染

1.先封装一个接口这里我们把接口函数名叫做findBanner，进行请求数据(这里省略代码)
2.广告组件获取数据，传给轮播图 src/views/home/components/home-banner.vue

<template>
  <div class="home-banner">
    <ShopCarousel :sliders="sliders" />
  </div>
</template>
<script>
import { ref } from 'vue'
import { findBanner } from '@/api/home'
export default {
  name: 'HomeBanner',
  setup () {
    const sliders = ref([])
    findBanner().then(data => {
      sliders.value = data.result
    })
    return { sliders }
  }
}
</script>

3.完成轮播图结构渲染 src/components/library/shop-carousel.vue

<template>
  <div class='shop-carousel'>
    <ul class="carousel-body">
      <li class="carousel-item" v-for="(item,i) in sliders" :key="i" :class="{fade:index===i}">
        <RouterLink to="/">
          <img :src="item.imgUrl" alt="">
        </RouterLink>
      </li>
    </ul>
    <a href="javascript:;" class="carousel-btn prev">
        <i class="iconfont icon-angle-left"></i>
    </a>
    <a href="javascript:;" class="carousel-btn next">
        <i class="iconfont icon-angle-right"></i>
    </a>
    <div class="carousel-indicator">
      <span v-for="(item,i) in sliders" :key="i" :class="{active:index===i}"></span>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'ShopCarousel',
  props: {
    sliders: {
      type: Array,
      default: () => []
    }
  },
  setup () {
    // 默认显示的图片的索引
    const index = ref(0)
    return { index }
  }
}
</script>

总结： fade是控制显示那张图片的，需要一个默认索引数据，渲染第一张图和激活第一个点。
目的： 封装轮播图组件，第三步：逻辑功能实现。

大致步骤：

自动播放，暴露自动轮播属性，设置了就自动轮播
如果有自动播放，鼠标进入离开，暂停，开启
指示器切换，上一张，下一张
销毁组件，清理定时器

1.自动轮播实现src/components/library/shop-carousel.vue

import { ref, watch } from 'vue'
export default {
  name: 'ShopCarousel',
  props: {
    sliders: {
      type: Array,
      default: () => []
    },
    //持续时间
    duration: {
      type: Number,
      default: 3000
    },
    //自动播放
    autoPlay: {
      type: Boolean,
      default: false
    }
  },
  setup (props) {
    // 默认显示的图片的索引
    const index = ref(0)
    // 自动播放
    let timer = null
    const autoPlayFn = () => {
    //这里要每次进行清空定时器，不然会开启多个定时器
      clearInterval(timer)
      timer = setInterval(() => {
        index.value++
        if (index.value >= props.sliders.length) {
          index.value = 0
        }
      }, props.duration)
    }
    watch(() => props.sliders, (newVal) => {
      // 有数据&开启自动播放，才调用自动播放函数
      if (newVal.length > 1 && props.autoPlay) {
        index.value = 0
        autoPlayFn()
      }
    }, { immediate: true })

    return { index }
  }
}

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

    // 鼠标进入停止，移出开启自动，前提条件：autoPlay为true
    const stop = () => {
      if (timer) clearInterval(timer)
    }
    const start = () => {
      if (props.sliders.length && props.autoPlay) {
        autoPlayFn()
      }
    }

    return { index, stop, start }

//这里要在div里面加上两个事件，鼠标进入事件和离开的事件
 <div class='shop-carousel' @mouseenter="stop()" @mouseleave="start()">

3.指示器切换，上一张，下一张

// 上一张下一张
const toggle = (step) => {
    index.value += step
    if (index >= props.sliders.length) {
        index.value = 0
        return
    }
    if (index < 0) {
        index.value = props.sliders.length - 1
        return
    }
}

return { index, stop, start, toggle }

<!-- 上一张 -->
<a @click="toggle(-1)" href="javascript:;" class="carousel-btn prev">
    <i class="iconfont icon-angle-left"></i>
</a>
<!-- 下一张 -->
<a @click="toggle(1)" href="javascript:;" class="carousel-btn next">
    <i class="iconfont icon-angle-right"></i>
</a>

4.销毁组件，清理定时器

// 组件消耗，清理定时器
onUnmounted(() => {
    clearInterval(timer)
})

以上就是手动封装一个轮播图组件的基本过程了，接下来让我们再来总结一下：

总结： 按照思路步骤，一步步实现即可。

基本组件拆分和布局

自动轮播

悬停控制启动和停止

手动控制切换

销毁定时器

抽取相关的参数
版权声明：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。作者: 很晚很晚了原文链接：https://juejin.im/post/7008116834452897823