VUE ———— Element Carousel 走马灯 源码分析与改写 （显示多张）

用过Element Carousel 组件的 应该都知道 ，他只能显示3个item, 而没有提供显示数量设置的属性，那如果想要显示多个，就要来改下他的源码，一起看下吧！

原本样式：

改动后：

首先在浏览器里先看下他的样式：

首先我们将隐藏的item 显示出来 发现他是这个样子的

 

我们会发现 他会在左面后者右面有两个item 是重叠的   其实不重叠 直接就可以用啦  哈哈  我们就在这个基础上面改就好了！

 

下面来看下代码： 首先carousel组件在element-ui/packages/carousel 就可以找到 主要是main.vue和item.vue两个文件

main.vue 这里不需要动，只需要改item.vue就可以，先看下item.vue的代码：

整个的处理主要有三个变量  

1. index : 每个item的原本索引值

2. activeIndex :  当前显示item的索引值  就是比例最大的那个

3. length: item的数量

下面看下 item.vue里面的方法：

 1. 这个方法是根据item的index和当前的activeIndex 以及 length 去重新排序item的位置的一个方法

2. 这个是在上面的方法之后，计算已经排序好的每个 item 的 偏移量

3. 再来看下这个方法 （代码中注释说明）

     translateItem(index, activeIndex, oldIndex) {
        const parentType = this.$parent.type;
        const parentDirection = this.parentDirection;
        const length = this.$parent.items.length;
        if (parentType !== 'card' && oldIndex !== undefined) {
          this.animating = index === activeIndex || index === oldIndex;
        }
        if (index !== activeIndex && length > 2 && this.$parent.loop) {
          // 这里调用上面第一个方法  计算每个item应该在的位置
          index = this.processIndex(index, activeIndex, length);
        }
        if (parentType === 'card') {
          if (parentDirection === 'vertical') {
            console.warn('[Element Warn][Carousel]vertical direction is not supported in card mode');
          }
          this.inStage = Math.round(Math.abs(index - activeIndex)) <= 1; // 这里变量用来判断class的  当前显示的和左右两个为true 提升了z-index 等级
          this.active = index === activeIndex; // 这个变量是用来判断当前主要展示的item  给了一个class  z-index 等级最高
          this.translate = this.calcCardTranslate(index, activeIndex); // 这里调用上面第二个方法 得到每个位置item的偏移量
          this.scale = this.active ? 1 : CARD_SCALE;
        } else {
          this.active = index === activeIndex;
          const isVertical = parentDirection === 'vertical';
          this.translate = this.calcTranslate(index, activeIndex, isVertical);
        }
        this.ready = true;
      },

Ok,下面是我修改后的 item.vue 完整代码

主要就是在上面提到的三个方法上面做了改动，我只显示六张，所以就是按照显示6张 写死的值，懒得计算啦  哈哈哈  但是大致思路就是这样  如果显示数量不一样 数值稍作改动就可以啦！