element⾛马灯⾃动_vueElementUI⾛马灯组件重写
1、element ui⾛马灯组件 -- carousel
分析⼀波源代码：
carousel/src/main.vue ⽂件为 el-carousel⽂件主要功能
carousel/src/item.vue ⽂件为 el-carousel-item 功能
2、carousel/src/main.vue⽂件详解：
1)、左右button切换按钮
class="el-carousel__container"
:>
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">
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">
2)、横向tab切换
class="el-carousel__indicators"
v-if="indicatorPosition !== 'none'"
:class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
v-for="(item, index) in items"
class="el-carousel__indicator"
:class="{ 'is-active': index === activeIndex }"
@mouseenter="throttledIndicatorHover(index)"
@click.stop="handleIndicatorClick(index)">
{{ item.label }}
3)关联child ElCarouselItem组件的⽅式
如：我将我的⼦组件命名为MyElCarouselItem 则为如下
updateItems() {
this.items = this.
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;
vue element admin
} 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.
el.offsetWidth;
const length = this.
}
if (index !== activeIndex && length > 2) {
index = this.processIndex(index, activeIndex, length);
}
if (this.$pe === 'card') {
this.inStage = und(Math.abs(index - activeIndex)) <= 1;
this.active = index === activeIndex;
this.scale = this.active ? 1 : CARD_SCALE;
} else {
this.active = index === activeIndex;
}
}
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.
el.offsetWidth;
const length = this.
el.offsetWidth;
if (this.
this.inStage = und(Math.abs(index - activeIndex)) <= 3;
this.active = index === activeIndex;
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;
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。