使用vue封装一个复用性较高的轮播图组件

下面代码为vue中template标签中的代码

<template>
  <div class="container">
    <div
      v-show="arrow"
      :style="{ ...arrowStyle, left: 0 }"
      @click="turnLeft"
      @mouseleave="beginMove"
    >
      &lt;
    </div>
    <ul class="img-list">
      <li
        :class="[
          'img-item',
          { hadActivedImg: index === hadActiveIndex },
          { activeImgLeft: index === activeIndex && !preImg },
          { activeImgRight: index === activeIndex && preImg }
        ]"
        v-for="(item, index) in imgList"
        :key="index"
        @mouseenter="mouseEnter"
        @mouseleave="beginMove"
      >
        <img :src="item" alt="图片加载失败" />
      </li>
    </ul>
    <div
      v-show="arrow"
      :style="{ ...arrowStyle, right: 0 }"
      @click="turnRight"
      @mouseleave="beginMove"
    >
      &gt;
    </div>
    <div :class="['point-container', pointDirection]" v-show="point">
      <div
        v-for="(item, index) in imgList"
        :style="{
          ...pointStyle,
          backgroundColor: activeIndex === index ? pointActiveColor : pointColor
        }"
        :key="index"
        @click="turnToImg(index)"
      ></div>
    </div>
  </div>
</template>

下面代码为script中的代码

export default {
  props: {
    // 接收父组件传过来的图片数组
    imgList: {
      type: Array,
      default: () => []
    },
    // 是否需要箭头，默认是需要
    arrow: {
      type: Boolean,
      default: true
    },
    // 箭头大小，默认是40px
    arrowSize: {
      type: Number,
      default: 40
    },
    // 箭头元素的宽高，默认是50px
    arrowWidth: {
      type: Number,
      default: 50
    },
    // 箭头的颜色，默认为白色，可以传入十六进制、rgb、rgba、颜色名(如white、blue...)
    arrorColor: {
      type: String,
      default: "#fff"
    },
    // 箭头的背景颜色，默认为0.5透明度的黑色，可以传入十六进制、rgb、rgba、颜色名(如white、blue...)
    arrowBgColor: {
      type: String,
      default: "rgba(0, 0, 0, 0.5)"
    },
    // 箭头元素的四个角的弧度，默认是15px
    arrowRadius: {
      type: String,
      default: "15px"
    },
    // 是否需要下面的小白点，默认为需要
    point: {
      type: Boolean,
      default: true
    },
    // 下面小白点的位置，可以选值为：point-left、point-middle、point-right
    pointDirection: {
      type: String,
      default: "point-left"
    },
    // 小白点的大小，默认为13px
    pointSize: {
      type: Number,
      default: 13
    },
    // point的默认颜色
    pointColor: {
      type: String,
      default: "#fff"
    },
    // point激活时的颜色
    pointActiveColor: {
      type: String,
      default: "#e63233"
    }
  },
  data() {
    return {
      timer: null, // 计时器
      activeIndex: 0, // 标记当前的轮播图序号
      hadActiveIndex: 0, // 标记上一张轮播图序号
      preImg: false, // 是否翻向上一页
      pointStyle: {
        cursor: "pointer",
        margin: "0 5px",
        "border-radius": "50%",
        width: this.pointSize > 0 ? this.pointSize + "px" : "13px",
        height: this.pointSize > 0 ? this.pointSize + "px" : "13px"
      }, // 小白点的样式
      arrowStyle: {
        cursor: "pointer",
        position: "absolute",
        top: "50%",
        transform: "translateY(-50%)",
        "z-index": 3,
        "font-size": this.arrowSize > 0 ? this.arrowSize + "px" : "40px",
        width: this.arrowWidth > 0 ? this.arrowWidth + "px" : "40px",
        height: this.arrowWidth > 0 ? this.arrowWidth + "px" : "40px",
        color: this.arrorColor,
        "background-color": this.arrowBgColor,
        "border-radius": this.arrowRadius > 0 ? this.arrowRadius + "px" : "15px"
      } // 箭头的样式
    };
  },
  methods: {
    // 点击左边箭头，表示往前翻一张图片
    turnLeft() {
      clearInterval(this.timer); // 轮播图停止轮播
      this.preImg = true; // 标记此操作是往前翻图片，用于改变动画效果
      this.hadActiveIndex = this.activeIndex; // 记录上一张图片的id
      if (this.activeIndex === 0) {
        // 如果已经是第一张图片，向前翻一张图片则变为最后一张
        this.activeIndex = this.imgList.length - 1;
      } else {
        this.activeIndex--;
      }
    },
    // 点击右边箭头，表示往前后一张图片
    turnRight() {
      clearInterval(this.timer);
      this.preImg = false;
      this.hadActiveIndex = this.activeIndex;
      if (this.activeIndex === this.imgList.length - 1) {
        this.activeIndex = 0;
      } else {
        this.activeIndex++;
      }
    },
    // 点击下面小白点，随意跳转图片
    turnToImg(index) {
      clearInterval(this.timer);
      this.hadActiveIndex = this.activeIndex;
      // 判断是否为往前翻图片
      if (index < this.activeIndex) {
        this.preImg = true;
      } else {
        this.preImg = false;
      }
      this.activeIndex = index;
    },
    switchImg() {
      this.hadActiveIndex = this.activeIndex;
      if (this.activeIndex === this.imgList.length - 1) {
        this.activeIndex = 0;
      } else {
        this.activeIndex++;
      }
    },
    // 开始轮播图片，当鼠标移出左右箭头、下面的小白点或者移出图片区域时触发
    beginMove() {
      clearInterval(this.timer);
      this.timer = setInterval(this.switchImg, 1500);
    },
    // 鼠标移入图片区域，轮播图停止轮播
    mouseEnter() {
      clearInterval(this.timer);
    }
  },
  created() {
    this.beginMove();
  }
};

下面代码是对应的scss代码

.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .img-list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    .img-item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }
  .point-container {
    z-index: 3;
    position: absolute;
    bottom: 15px;
    display: flex;
  }
  .point-middle {
    left: 50%;
    transform: translateX(-50%);
  }
  .point-left {
    left: 10px;
  }
  .point-right {
    right: 10px;
  }
}
.hadActivedImg {
  z-index: 1;
}
.activeImgLeft {
  z-index: 2;
  animation: turnLeftImg 0.5s ease-in forwards;
}
.activeImgRight {
  z-index: 2;
  animation: turnRightImg 0.5s ease-in forwards;
}
@keyframes turnLeftImg {
  0% {
    left: 100%;
  }
  100% {
    left: 0;
  }
}
@keyframes turnRightImg {
  0% {
    left: -100%;
  }
  100% {
    left: 0;
  }
}

调用该组件的例子：

  <div style="position: relative;">
    <swiper
      style="width: 60%; height: 400px; position: absolute; left: 50%; transform: translateX(-50%);"
    ></swiper>
  </div>

import swiper from "./swiper/swiper";
export default {
  components: { swiper },
  data() {
    return {
      imgList: [
        require("../assets/swiperImg/1.png"),
        require("../assets/swiperImg/2.png"),
        require("../assets/swiperImg/3.png"),
        require("../assets/swiperImg/4.png"),
        require("../assets/swiperImg/5.png"),
      ]
    }
  },
};