element-ui Carousel 走马灯源码分析整理笔记（十一）

Carousel 走马灯源码分析整理笔记，这篇写的不详细，后面有空补充

main.vue

<template>
  <!--走马灯的最外层包裹div-->
  <div class=\"el-carousel\"
    :class=\"{ \'el-carousel--card\': type === \'card\' }\"
    @mouseenter.stop=\"handleMouseEnter\"
    @mouseleave.stop=\"handleMouseLeave\">
    <div class=\"el-carousel__container\" :style=\"{ height: height }\">
      <!--左边的切换箭头-->
      <transition name=\"carousel-arrow-left\">
        <button
          type=\"button\"
          v-if=\"arrow !== \'never\'\"
          v-show=\"(arrow === \'always\' || hover) && (loop || activeIndex > 0)\"
          @mouseenter=\"handleButtonEnter(\'left\')\"
          @mouseleave=\"handleButtonLeave\"
          @click.stop=\"throttledArrowClick(activeIndex - 1)\"
          class=\"el-carousel__arrow el-carousel__arrow--left\">
          <i class=\"el-icon-arrow-left\"></i>
        </button>
      </transition>
      <!--右边的切换箭头-->
      <transition name=\"carousel-arrow-right\">
        <button
          type=\"button\"
          v-if=\"arrow !== \'never\'\"
          v-show=\"(arrow === \'always\' || hover) && (loop || activeIndex < items.length - 1)\"
          @mouseenter=\"handleButtonEnter(\'right\')\"
          @mouseleave=\"handleButtonLeave\"
          @click.stop=\"throttledArrowClick(activeIndex + 1)\"
          class=\"el-carousel__arrow el-carousel__arrow--right\">
          <i class=\"el-icon-arrow-right\"></i>
        </button>
      </transition>
        <!--幻灯片内容显示区域-->
      <slot></slot>
    </div>
    <!--底部的指示器列表，点击或hover时切换幻灯片-->
    <ul
      class=\"el-carousel__indicators\"
      v-if=\"indicatorPosition !== \'none\'\"
      :class=\"{ \'el-carousel__indicators--labels\': hasLabel, \'el-carousel__indicators--outside\': indicatorPosition === \'outside\' || type === \'card\' }\">
      <li
        v-for=\"(item, index) in items\"
        class=\"el-carousel__indicator\"
        :class=\"{ \'is-active\': index === activeIndex }\"
        @mouseenter=\"throttledIndicatorHover(index)\"
        @click.stop=\"handleIndicatorClick(index)\">
        <button class=\"el-carousel__button\"><span v-if=\"hasLabel\">{{ item.label }}</span></button>
      </li>
    </ul>

  </div>
</template>

< >
 //throttle节流函数
import throttle from \'throttle-debounce/throttle\';
import { addResizeListener, removeResizeListener } from \'element-ui/src/utils/resize-event\';

export default {
  name: \'ElCarousel\',

  props: {
    initialIndex: { //初始状态激活的幻灯片的索引，从 0 开始
      type: Number,
      default: 0
    },
    height: String, //走马灯的高度
    trigger: { //指示器的触发方式
      type: String,
      default: \'hover\'
    },
    autoplay: { //是否自动切换
      type: Boolean,
      default: true
    },
    interval: { //自动切换的时间间隔，单位为毫秒
      type: Number,
      default: 3000
    },
    indicatorPosition: String, //指示器的位置
    indicator: {
      type: Boolean,
      default: true
    },
    arrow: {  //切换箭头的显示时机 always/hover/never
      type: String,
      default: \'hover\'
    },
    type: String, //走马灯的类型,card
    loop: {  //是否循环显示
      type: Boolean,
      default: true
    }
  },

  data() {
    return {
      items: [],  //幻灯片数组
      activeIndex: -1, //标识当前幻灯片索引
      containerWidth: 0,
      timer: null,
      hover: false //记录当前鼠标的移入状态
    };
  },

  computed: {
    hasLabel() {
      return this.items.some(item => item.label.toString().length > 0);
    }
  },

  watch: {
    items(val) {
      if (val.length > 0) this.setActiveItem(this.initialIndex);
    },

    activeIndex(val, oldVal) {
      this.resetItemPosition(oldVal);
      this.$emit(\'change\', val, oldVal);
    },

    autoplay(val) {
      val ? this.startTimer() : this.pauseTimer();
    },

    loop() {
      this.setActiveItem(this.activeIndex);
    }
  },

  methods: {
    // 当鼠标移入
    handleMouseEnter() {
      // 当鼠标移入时，清空幻灯片播放的定时器，暂停自动切换。
      this.hover = true;
      this.pauseTimer();
    },
    // 当鼠标移出
    handleMouseLeave() {
      //  当鼠标移出，设置幻灯片自动播放定时器
      this.hover = false;
      this.startTimer();
    },

    itemInStage(item, index) {
      const length = this.items.length;
      // 满足当前为最后一个幻灯片；当前幻灯片在场景内；第一个幻灯片激活状态；
      //  或者 满足 当前幻灯片在场景内；当前幻灯片后面有至少一个项目；当前幻灯片后面一个项目处于激活状态
      if (index === length - 1 && item.inStage && this.items[0].active ||
        (item.inStage && this.items[index + 1] && this.items[index + 1].active)) {
        return \'left\';
      } else if (index === 0 && item.inStage && this.items[length - 1].active ||
        (item.inStage && this.items[index - 1] && this.items[index - 1].active)) {
        return \'right\';
      }
      return false;
    },
    // 当鼠标移入左边的切换幻灯片的按钮
    handleButtonEnter(arrow) {
      this.items.forEach((item, index) => {
        if (arrow === this.itemInStage(item, index)) {
          item.hover = true;
        }
      });
    },

    handleButtonLeave() {
      this.items.forEach(item => {
        item.hover = false;
      });
    },
    // 将所有的幻灯片放入items数组中
    updateItems() {
      this.items = this.$children.filter(child => child.$options.name === \'ElCarouselItem\');
    },
    //  重置幻灯片位置
    resetItemPosition(oldIndex) {
      this.items.forEach((item, index) => {
        item.translateItem(index, this.activeIndex, oldIndex);
      });
    },
    //改变当前的幻灯片
    playSlides() {
      if (this.activeIndex < this.items.length - 1) {
        this.activeIndex++;
      } else if (this.loop) {
        this.activeIndex = 0;
      }
    },

    pauseTimer() {
      // 清空定时器
      clearInterval(this.timer);
    },

    startTimer() {
      //  如果自动切换的时间间隔小于等于0时，或者用户未设置自动播放时，直接返回，幻灯片不自动播放
      if (this.interval <= 0 || !this.autoplay) return;
      this.timer = setInterval(this.playSlides, this.interval);
    },
    //设置当前页
    setActiveItem(index) {
      // 如果index是字符串，则是用户设置了幻灯片的name
      if (typeof index === \'string\') {
        // 找到对应name的幻灯片
        const filteredItems = this.items.filter(item => item.name === index);
        // 如果找到的items长度大于0，取第一个的索引作为我们要使用的索引
        if (filteredItems.length > 0) {
          index = this.items.indexOf(filteredItems[0]);
        }
      }
      // 索引转成数字
      index = Number(index);
      // 如果索引不是数字，或者不是整数
      if (isNaN(index) || index !== Math.floor(index)) {
        // 如果不是生产环境下，就报warn
        process.env.NODE_ENV !== \'production\' &&
        console.warn(\'[Element Warn][Carousel]index must be an integer.\');
        return;
      }
      // 获取幻灯片数组的长度
      let length = this.items.length;
      const oldIndex = this.activeIndex;
      // 如果索引小于0，判断是否设置循环播放，如果设置了，设置当前页为最后一页；也就是在向前切换到第一张，继续向前切换显示最后一张，然后显示倒数第二张
      if (index < 0) {
        this.activeIndex = this.loop ? length - 1 : 0;
      } else if (index >= length) { //如果索引大于数组长度，判断是否设置循环播放，如果设置了，设置当前页为第一页；也就是在向后切换到最后一张时，继续向后切换显示第一张，然后显示第二张
        this.activeIndex = this.loop ? 0 : length - 1;
      } else { //否则，当前页设置为索引页
        this.activeIndex = index;
      }

      if (oldIndex === this.activeIndex) {
        this.resetItemPosition(oldIndex);
      }
    },

    prev() {
      this.setActiveItem(this.activeIndex - 1);
    },

    next() {
      this.setActiveItem(this.activeIndex + 1);
    },

    handleIndicatorClick(index) {
      this.activeIndex = index;
    },

    handleIndicatorHover(index) {
      if (this.trigger === \'hover\' && index !== this.activeIndex) {
        this.activeIndex = index;
      }
    }
  },

  created() {
    // throttle节流函数，点击频率控制，返回函数连续调用时   http://npm.taobao.org/package/throttle-debounce
    // 第二个参数noTrailing，当其设置为true时，保证函数每隔delay时间只能执行一次，如果设置为false或者没有指定，则会在最后一次函数调用后的delay时间后重置计时器。
    this.throttledArrowClick = throttle(300, true, index => {
      this.setActiveItem(index);
    });
    this.throttledIndicatorHover = throttle(300, index => {
      this.handleIndicatorHover(index);
    });
  },

  mounted() {
    this.updateItems();
    this.$nextTick(() => {
      addResizeListener(this.$el, this.resetItemPosition);
      if (this.initialIndex < this.items.length && this.initialIndex >= 0) {
        this.activeIndex = this.initialIndex;
      }
      this.startTimer();
    });
  },

  beforeDestroy() {
    if (this.$el) removeResizeListener(this.$el, this.resetItemPosition);
  }
};
</ >

item.vue

<template>
  <!--单个的幻灯片html结构-->
  <div v-show=\"ready\" class=\"el-carousel__item\"
    :class=\"{
      \'is-active\': active,
      \'el-carousel__item--card\': $parent.type === \'card\',
      \'is-in-stage\': inStage,
      \'is-hover\': hover,
      \'is-animating\': animating
    }\"
    @click=\"handleItemClick\"
    :style=\"{
      msTransform: `translateX(${ translate }px) scale(${ scale })`,
      webkitTransform: `translateX(${ translate }px) scale(${ scale })`,
      transform: `translateX(${ translate }px) scale(${ scale })`
    }\">
    <div v-if=\"$parent.type === \'card\'\" v-show=\"!active\" class=\"el-carousel__mask\"></div>
    <!--幻灯片的自定义内容以插槽的方式显示在此区域-->
    <slot></slot>
  </div>
</template>

< >
  const CARD_SCALE = 0.83;
  export default {
    name: \'ElCarouselItem\',

    props: {
      name: String, //幻灯片的名字，可用作 setActiveItem 的参数
      label: { //该幻灯片所对应指示器的文本
        type: [String, Number],
        default: \'\'
      }
    },

    data() {
      return {
        hover: false,
        translate: 0, //偏移量设置
        scale: 1,
        active: false,
        ready: false,
        inStage: false,
        animating: false
      };
    },

    methods: {
      processIndex(index, activeIndex, length) {
        if (activeIndex === 0 && index === length - 1) {
            //当前是activeIndex是第一张，index是最后一张，返回-1，相差-1，表示二者相邻且在左侧
          return -1;
        } else if (activeIndex === length - 1 && index === 0) {
          //当前页activeIndex是最后一张，index是第一张，返回length，相差1，表示二者相邻且在右侧
          return length;
        } else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
            // 如果，index在activeIndex前一页的前面，并且之间的间隔在一半页数即以上，则返回页数长度+1，这样它们会被置于最右侧
          return length + 1;
        } else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
            // 如果，index在activeIndex后一页的后面，并且之间的间隔在一般页数即以上，则返回-2，这样它们会被置于最左侧
          return -2;
        }
        return index;
      },

      calculateTranslate(index, activeIndex, parentWidth) {
        if (this.inStage) {
          return parentWidth * ((2 - CARD_SCALE) * (index - activeIndex) + 1) / 4;
        } else if (index < activeIndex) {
          return -(1 + CARD_SCALE) * parentWidth / 4;
        } else {
          return (3 + CARD_SCALE) * parentWidth / 4;
        }
      },
      // 这是用来移动幻灯片。
      translateItem(index, activeIndex, oldIndex) {
        // 获取父组件的宽度
        const parentWidth = this.$parent.$el.offsetWidth;
        // 获取幻灯片数组的长度
        const length = this.$parent.items.length;
        // 如果不是card模式
        if (this.$parent.type !== \'card\' && oldIndex !== undefined) {
          this.animating = index === activeIndex || index === oldIndex;
        }
        if (index !== activeIndex && length > 2 && this.$parent.loop) {
          // 对当前索引进行处理
          index = this.processIndex(index, activeIndex, length);
        }
        if (this.$parent.type === \'card\') {
          this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1;
          this.active = index === activeIndex;
          this.translate = this.calculateTranslate(index, activeIndex, parentWidth);
          this.scale = this.active ? 1 : CARD_SCALE;
        } else {
          this.active = index === activeIndex;
          // 设置幻灯片的偏移量
          this.translate = parentWidth * (index - activeIndex);
        }
        this.ready = true;
      },

      handleItemClick() {
        const parent = this.$parent;
        if (parent && parent.type === \'card\') {
          const index = parent.items.indexOf(this);
          parent.setActiveItem(index);
        }
      }
    },

    created() {
      this.$parent && this.$parent.updateItems();
    },

    destroyed() {
      this.$parent && this.$parent.updateItems();
    }
  };
</ >