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> <script>
//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);
}
};
</script>

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> <script>
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();
}
};
</script>

element-ui Carousel 走马灯源码分析整理笔记(十一)的更多相关文章

  1. element-ui 组件源码分析整理笔记目录

    element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...

  2. element-ui button组件 radio组件源码分析整理笔记(一)

    Button组件 button.vue <template> <button class="el-button" @click="handleClick ...

  3. Element UI table组件源码分析

    本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...

  4. element-ui inputNumber、Card 、Breadcrumb组件源码分析整理笔记(三)

    inputNumber组件 <template> <!--@dragstart.prevent禁止input中数字的拖动--> <div @dragstart.preve ...

  5. element-ui input组件源码分析整理笔记(六)

    input 输入框组件 源码: <template> <div :class="[ type === 'textarea' ? 'el-textarea' : 'el-in ...

  6. element-ui Upload 上传组件源码分析整理笔记(十四)

    简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...

  7. element-ui MessageBox组件源码分析整理笔记(十二)

    MessageBox组件源码,有添加部分注释 main.vue <template> <transition name="msgbox-fade"> < ...

  8. element-ui switch组件源码分析整理笔记(二)

    源码如下: <template> <div class="el-switch" :class="{ 'is-disabled': switchDisab ...

  9. element-ui Pagination组件源码分析整理笔记(七)

    element-ui源码的版本是2.4.9 pagination.js import Pager from './pager.vue'; import ElSelect from 'element-u ...

随机推荐

  1. setlocale()函数详解——C语言

    setlocale函数 函数原型:char* setlocale (int category, const char* locale); setlocale位于头文件,setlocale() 函数既可 ...

  2. 3.html基础标签:表格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. sql 语句的limit的用法

    SELECT * FROM table  LIMIT [offset,] rows | rows OFFSET offset   mysql> SELECT * FROM table LIMIT ...

  4. Linux链接脚本学习--lds

    一.概论 ld: GNU的链接器. 用来把一定量的目标文件跟档案文件链接在一起,并重新定位它们的数据,链接符号引用. 一般编译一个程序时,最后一步就是运行ld进行链接 每一个链接都被一个链接脚本所控制 ...

  5. 你(可能)不知道的web api

    你(可能)不知道的web api 简介 作为前端er,我们的工作与web是分不开的,随着HTML5的日益壮大,浏览器自带的webapi也随着增多.本篇文章主要选取了几个有趣且有用的webapi进行介绍 ...

  6. android开发学习——day8

    关于UI学习的总结 EditText的练习 MainActivity.java代码 package test.example.com.ch02_button; import android.suppo ...

  7. 7z 程序打包 Demo

    最近准备做一个用户端 异常收集的程序  需要收集用户机器的程序日志和相关信息 准备打包发回来  所以研究了一下7Z 文件压缩 做一个笔记吧 遇到的问题: 1:VS2008 遇到 loadlibrary ...

  8. Kafka实战-Kafka到Storm

    1.概述 在<Kafka实战-Flume到Kafka>一文中给大家分享了Kafka的数据源生产,今天为大家介绍如何去实时消费Kafka中的数据.这里使用实时计算的模型——Storm.下面是 ...

  9. Visual Studio 2012 智能提示功能消失解决办法

    安装为Visual Studio 2012且更新到了Update3,但是发现智能提示功能用不了,查了一下,网上各种资料,重装VS,连重装系统的都有.不过有很多朋友都是使用命令行重置VS的方法解决了这个 ...

  10. git第七节---git merge和git rebase

    # git merge和git rebase 都可以进行分支合并 #git merge 合并后保留记录两个分支的记录 #git rebase合并后会展示成一个分支的记录,另一个分支的提交实际生成了一个 ...