vue Element UI走马灯组件重写

1、element ui走马灯组件 -- carousel
分析一波源代码：
carousel/src/main.vue 文件为 el-carousel文件主要功能
carousel/src/item.vue 文件为 el-carousel-item 功能

2、carousel/src/main.vue文件详解：
1）、左右button切换按钮
<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"
@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"
@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>

2）、横向tab切换
<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>
3）关联child ElCarouselItem组件的方式
如：我将我的子组件命名为MyElCarouselItem 则为如下
updateItems() {
this.items = this. $children.filter(child => child.$ options.name === 'MyElCarouselItem');
}

3、carousel/src/item.vue 文件详解：
1）计算每个CarouselItem 的translate 距离
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;
}
}

2）CarouselItem 的大小样式确定以及滚动距离样式确定 translate、scale值
translateItem(index, activeIndex, oldIndex) {
const parentWidth = this. $parent.$ el.offsetWidth;
const length = this. $parent.items.length; if (this.$ parent.type !== 'card' && oldIndex !== undefined) {
this.animating = index === activeIndex || index === oldIndex;
}
if (index !== activeIndex && length > 2) {
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;
}

4、个人修改实现5个card展示在前，不全屏展示的效果

12.png

1）各card的大小缩小比率
const CARD_SCALE = 0.9; // 中心Card的左右两边的第一个card大小缩小比例
const CARD_SCALE_diff_second = 0.1; //中心Card的左右两边的第二个card大小缩小比例与中心Card的左右两边的第一个card大小缩小比例差值，即中心Card的左右两边的第二个card大小缩小比例为：CARD_SCALE - CARD_SCALE_diff_second

2)、计算5个card的移动距离 ,以下写法超过5个会出现切换视觉效果不佳问题
calculateTranslate(index, activeIndex, parentWidth,cardWidth) {

            const diff = (parentWidth-(1 + 2 * CARD_SCALE + 2* (CARD_SCALE - CARD_SCALE_diff_second)) * cardWidth)/2
            if (this.inStage) {
                if(Math.abs(index - activeIndex) <2){
                    return diff + ((index - activeIndex +2) *(0 +  CARD_SCALE )- CARD_SCALE_diff_second) * cardWidth ;
                }else if(index - activeIndex <= -2){
                    return diff ;
                }
                return diff + (4 * CARD_SCALE - 2 * CARD_SCALE_diff_second ) * cardWidth;

            }
            //方式一：
            // else if (index < activeIndex) {
            //     return -parentWidth;
            // } else {
            //     return parentWidth + (diff + (4 * CARD_SCALE - 2 * CARD_SCALE_diff_second ) * cardWidth);
            // }
            return diff + (2 * CARD_SCALE - CARD_SCALE_diff_second) * cardWidth;
        },

3)、计算translate
translateItem(index, activeIndex, oldIndex) {
const parentWidth = this. $parent.$ el.offsetWidth;
const length = this. $parent.items.length; const cardWidth = this.$ el.offsetWidth;
if (this. $parent.type !== 'card' && oldIndex !== undefined) { this.animating = index === activeIndex || index === oldIndex; } if (index !== activeIndex && length > 2) { index = this.processIndex(index, activeIndex, length); } if (this.$ parent.type === 'card') {
this.inStage = Math.round(Math.abs(index - activeIndex)) <= 3;
this.active = index === activeIndex;
this.translate = this.calculateTranslate(index, activeIndex, parentWidth,cardWidth);
this.scale = this.active ? 1 : (Math.abs(index - activeIndex) >= 2)? (CARD_SCALE -CARD_SCALE_diff_second ) : (CARD_SCALE);
this.outCard = (Math.abs(index - activeIndex) >= 2)? true : false;
} else {
this.active = index === activeIndex;
this.translate = parentWidth * (index - activeIndex);
}
this.ready = true;
},

vue Element UI走马灯组件重写

推荐阅读更多精彩内容