用过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 完整代码
<template>
<div
v-show="ready"
class="el-carousel__item"
:class="{
'is-active': active,
'el-carousel__item--card': $parent.type === 'card',
'is-in-stage': inStage,
'specialIndex': specialIndex,
'is-hover': hover,
'is-animating': animating
}"
@click="handleItemClick"
:style="itemStyle">
<div
v-if="$parent.type === 'card'"
v-show="!active"
class="el-carousel__mask">
</div>
<slot></slot>
</div>
</template>
<script>
import { autoprefixer } from 'element-ui/src/utils/util';
const CARD_SCALE = 0.83;
export default {
name: 'ElCarouselItem',
props: {
name: String,
label: {
type: [String, Number],
default: ''
}
},
data() {
return {
hover: false,
translate: 0,
scale: 1,
active: false,
ready: false,
inStage: false,
specialIndex: false,
animating: false
};
},
methods: {
processIndex(index, activeIndex, length) {
if(activeIndex == 0) {
return index==1?1:index==2?2:index==3?-3:index==4?-2:index==5?-1:0
}
if(activeIndex == 1) {
return index==2?1:index==3?2:index==4?-3:index==5?-2:index==0?-1:0
}
if(activeIndex == 2) {
return index==3?1:index==4?2:index==5?-3:index==0?-2:index==1?-1:0
}
if(activeIndex == 3) {
return index==4?1:index==5?2:index==0?-3:index==1?-2:index==2?-1:0
}
if(activeIndex == 4) {
return index==5?1:index==0?2:index==1?-3:index==2?-2:index==3?-1:0
}
if(activeIndex == 5) {
return index==0?1:index==1?2:index==2?-3:index==3?-2:index==4?-1:0
}
},
calcCardTranslate(index, activeIndex) {
return index * 80 * 2
},
calcTranslate(index, activeIndex, isVertical) {
const distance = this.$parent.$el[isVertical ? 'offsetHeight' : 'offsetWidth'];
return distance * (index - activeIndex);
},
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;
}
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)) <= 1;
this.specialIndex = Math.round(Math.abs(index)) >= 3;
this.active = index === 0;
this.translate = this.calcCardTranslate(index, activeIndex);
this.scale = Math.abs(index)==0 ? 1 : Math.abs(index)==1? 0.83 : Math.abs(index)==2? 0.73 : Math.abs(index)==3? 0.65 : 0.58;
} else {
this.active = index === activeIndex;
const isVertical = parentDirection === 'vertical';
this.translate = this.calcTranslate(index, activeIndex, isVertical);
}
this.ready = true;
},
handleItemClick() {
const parent = this.$parent;
if (parent && parent.type === 'card') {
const index = parent.items.indexOf(this);
parent.setActiveItem(index);
}
}
},
computed: {
parentDirection() {
return this.$parent.direction;
},
itemStyle() {
const translateType = this.parentDirection === 'vertical' ? 'translateY' : 'translateX';
const value = `${translateType}(${ this.translate }px) scale(${ this.scale })`;
const style = {
transform: value
};
return autoprefixer(style);
}
},
created() {
this.$parent && this.$parent.updateItems();
},
destroyed() {
this.$parent && this.$parent.updateItems();
}
};
</script>
<style>
.el-carousel__arrow--left {
left: -426px
}
.el-carousel__arrow--right {
right: -25px;
}
.el-carousel__item {
cursor: pointer;
z-index: 1;
}
.el-carousel__item--card.is-in-stage {
z-index: 2;
}
.el-carousel__item--card.is-active {
z-index: 3;
}
.specialIndex{
z-index: 0
}
</style>
主要就是在上面提到的三个方法上面做了改动,我只显示六张,所以就是按照显示6张 写死的值,懒得计算啦 哈哈哈 但是大致思路就是这样 如果显示数量不一样 数值稍作改动就可以啦!