Vue封装 轮播图 组件 (传入链接、图片即可使用)

1.先看效果图：

2.目录：

3.Swiper.vue源码：

<template>
  <div id="mySwiper">
    <div
      class="swiper"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
    >
      <slot></slot>
    </div>

    <div class="indicator">
      <div
        class="indicatorItem"
        v-for="(item, index) in slideCount"
        :key="index"
        :class="{ active: index === currentIndex - 1 }"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
   
  name: "Swiper",
  props: {
   },
  data: function() {
   
    return {
   
      slideCount: 0,
      interval: 3000,
      imgWidth: 0, //swiper每张图片的宽度一样
      swiperStyle: {
   }, //利用swiper的style对象来控制着“过渡”
      currentIndex: 1, //记录当前滑动的下标
      scrolling: false, //当用手触摸和移动时,则暂停滚动
      animalDuration: 300, //切换一张图片0.3
      showIndicator: true, //当只有一张图片时，不显示小点点
      moveRatio: 0.25,
      playTimer: null, //控制着计时器的开始与暂停
      moveRatio: 0.25
    };
  },
  methods: {
   
    handleDom: function() {
   
      let swiperEle = document.querySelector(".swiper");
      let slideEles = document.getElementsByClassName("slide");
      this.slideCount = slideEles.length;
      console.log(this.slideCount)