2/5 Vue.js 简单轮播组件

　　以前刚接触Vue的时候手撸了一个 轮播图 效果还是不错的

　　但是在学习过程中，越发发现组件的用处

　　所以在书上源码的加持下 添油加醋 写了一个轮播组件

　　注释很清晰 供有缘人查看

<template>
  <div class="swiper-container">
    <!-- 用动态样式换图片 -->
    <!-- 通过div的方式展示图片可以减轻浏览器负担 -->

    <!-- 进行过渡 -->
    <transition-group name="images" tag="div" class="swiper-images">
      <!-- 通过v-for来实现多个盒子的注入 -->
      <div
        v-for="(slide, index) in slides"
        :key="slides.indexOf(slide)"
        :style="{ backgroundImage: 'url(' + slide + ')' }"
        class="swiper-image"
        v-show="index === value"
        @mouseover="toggleIndex(index)"
        @mouseout="initTimer"
      ></div>
    </transition-group>

    <!-- 切换按钮 -->
    <div class="swiper-paginator">
      <!-- slides 是父组件传入的参数 -->

      <span
        v-for="(slide, index) in slides"
        :key="index"
        class="paginator-item"
        :class="{ 'paginator-current': index === value }"
        @mouseover="toggleIndex(index)"
        @mouseout="initTimer"
      ></span>
    </div>

    <div
      class="arrow arrow_left"
      @click="onLeft"
      @mouseover="toggleIndex()"
      @mouseout="initTimer"
    >
      <div></div>
    </div>
    <div
      class="arrow arrow_right"
      @click="onRight"
      @mouseover="toggleIndex()"
      @mouseout="initTimer"
    >
      <div></div>
    </div>
  </div>
</template>
 
<script>
// 制造组件的第一部分 其实就是想清楚 变量
// 要得到相应的 变量 ； 要从上级组件得到的 参数
// 这里 因为是 轮播图 所以
//  1 存放图片路径的图片数组 slides
//  2 当前的图片标志 （页码） value
//  3 自动轮播的时间间隔 interval
// 这些我们都可以从上级的组件里面得到

export default {
  name: "Swiper",
  props: {
    slides: {
      type: Array,
      validator(value) {
        //  判断是否每一个元素 都是 满足String 的条件
        return value.every(
          (item) => Object.prototype.toString.call(item) === "[object String]"
        );
      },
    },
    value: {
      //  Value 标志当前的图片 默认是从 0 开始 ( props 里面的 value 属性默认接受父组件的v-model值 )
      type: Number,
      default: 0,
    },
    interval: {
      //  间隔也是一个 数字类型的变量 默认从 4 开始
      type: Number,
      default: 4,
    },
  },
  data() {
    return {
      //  在 data 里面设置一个 计时器 还未被初始化
      timer: null,
    };
  },

  mounted() {
    // 每次挂载好了 就开启计时器
    this.initTimer();
  },
  methods: {
    //  初始化计时器
    initTimer() {
      this.timer = setInterval(() => {
        //  父组件的 input 的参数
        this.$emit("input", (this.value + 1) % this.slides.length);
      }, this.interval * 1000);
    },
    //  每当 hover 和 点击到了 按钮 就开始 执行下面的操作
    toggleIndex(index) {
      // 父组件的index 为当前的的index 如果 没有参数 则就是原来的数值 注意0也是没得
      this.$emit("input", index >= 0 ? index : this.value);
      clearInterval(this.timer); // 清除计时器
    },
    // 箭头点击
    // 左箭头
    onLeft() {
      // 自己做一下数学运算
      this.$emit(
        "input",
        this.value - 1 >= 0
          ? (this.value - 1) % this.slides.length
          : (this.slides.length - Math.abs(this.value - 1)) % this.slides.length
      );
      clearInterval(this.timer); // 清除计时器
    },
    // 右箭头
    onRight() {
      this.$emit("input", (this.value + 1) % this.slides.length);
      clearInterval(this.timer); // 清除计时器
    },
  },
};
</script>
 
<style scoped>
/* scoped 表明该 css 仅仅只适用于 本组件 */
.swiper-container {
  /* 容纳的大盒子 子绝 父相 */
  position: relative;
  width: 100%;
  height: 100%;
}
.swiper-images {
  height: 100%;
  width: 100%;
}
.swiper-image {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  /* 让几个 image 盒子重叠 */
  position: absolute;
}
.swiper-paginator {
  margin-top: -30px;
  padding-right: 5px;
  text-align: right;
  list-style: none;
}
.paginator-item {
  cursor: pointer;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 5px;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.3;
}
.paginator-current {
  background-color: #fff; /* 当前激活的幻灯片切换按钮样式 */
  opacity: 0.6;
}

/* 箭头 */
.arrow {
  display: block;
  width: 45px;
  height: 108px;
  position: absolute;
  top: 35%;
  cursor: pointer;
  right: -20%;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.3) 5%,
    rgba(0, 0, 0, 0) 95%
  );
  transition: all 0.5s;
}
.arrow_left {
  /*//左边距离父盒子边框*/
  left: -45px;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.3) 5%,
    rgba(0, 0, 0, 0) 95%
  );
}
.arrow_right {
  /*//右边距离父盒子边框*/
  right: -45px;
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.3) 5%,
    rgba(0, 0, 0, 0) 95%
  );
}
.arrow:hover {
  background: linear-gradient(
    to left,
    rgba(171, 218, 244, 0.3) 5%,
    rgba(171, 218, 244, 0) 95%
  );
}

.arrow div {
  display: block;
  /* 箭头图片的路径 */
  background-image: url(/static/images/arrow.png);
  background-repeat: no-repeat;
  height: 36px;
  width: 23px;
  margin: 36px auto;
}

.arrow_left div {
  background-position: -23px 0px;
}
.arrow_right div {
  background-position: 0px 0px;
}

/* 过渡效果 */
.images-enter,
.images-leave-to {
  opacity: 0;
  /* transform:translateX(30px) */
}
.images-enter-active,
.images-leave-active {
  transition-property: all;
  /* transition-delay: 100ms; */
  transition-duration: 500ms;
  transition-timing-function: linear;
}
.images-leave,
.images-enter-to {
  /* transform:translateX(0px); */
  opacity: 1;
}
</style>

　　当然这个组件应该怎么用呢，

　　如下图

　　

 

 

---

　　接着是我写这个组件的时候遇到的问题

　　1.trasnsition-group 没有只套用在 v-for 的一个标签上

　　　　当时是这样的，v-for那个div 外层还有一个 大div , 我给套在大盒子上了，结果就出错了

　　2.js 表示假值的一般来说 就是没得的东西 0 也是假值

　　　　加了注释的地方就是我出错的地方

　　　　

 

 　　　　当时没有想到这个，原来的代码是 框起来的那个部分

　　　　

  　　　  如果 传入 0 的时候，如果参数 index 为 0 的话，就会发生意想不到的事情 

　　　　表现在这个组件里面就是没办法点击到第一个小圆点，因为传到的参数是 0 

　　　　3.还有一个错误，就是

　　　　　　

　　　　transition-group提示key值没有弄对，其实这里直接 这样就能解决 或者 :key ="slide"

　　　　　　

　　　　最后呢

　　　　对比原来写的一个代码，我发现现在这个组件的代码更加美观，原来那个太小孩子了 感觉

　　　　　　原来写的 https://www.cnblogs.com/WaterMealone/articles/14332704.html

　　　　注：

　　　　　　可能有朋友在用的时候会发现，小圆点有点奇怪，这个我也不知道怎么去处理，因为 span 的规定范围太小了，导致了快速滑动的时候 判定老是更新

　　　　　　所以 会有一种反应不过来的 现象

　　　　　　然后这个是箭头的图片

　　　　　　

　　　　　　这个是整个项目的图片

　　　　　　

 

 　　总结

　　　　每天进步一点点

　　　　今天再撸一下代码