element-ui Carousel 走马灯源码分析整理笔记(十一)
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 走马灯源码分析整理笔记(十一)的更多相关文章
- element-ui 组件源码分析整理笔记目录
element-ui button组件 radio组件源码分析整理笔记(一) element-ui switch组件源码分析整理笔记(二) element-ui inputNumber.Card .B ...
- element-ui button组件 radio组件源码分析整理笔记(一)
Button组件 button.vue <template> <button class="el-button" @click="handleClick ...
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
- element-ui inputNumber、Card 、Breadcrumb组件源码分析整理笔记(三)
inputNumber组件 <template> <!--@dragstart.prevent禁止input中数字的拖动--> <div @dragstart.preve ...
- element-ui input组件源码分析整理笔记(六)
input 输入框组件 源码: <template> <div :class="[ type === 'textarea' ? 'el-textarea' : 'el-in ...
- element-ui Upload 上传组件源码分析整理笔记(十四)
简单写了部分注释,upload-dragger.vue(拖拽上传时显示此组件).upload-list.vue(已上传文件列表)源码暂未添加多少注释,等有空再补充,先记下来... index.vue ...
- element-ui MessageBox组件源码分析整理笔记(十二)
MessageBox组件源码,有添加部分注释 main.vue <template> <transition name="msgbox-fade"> < ...
- element-ui switch组件源码分析整理笔记(二)
源码如下: <template> <div class="el-switch" :class="{ 'is-disabled': switchDisab ...
- element-ui Pagination组件源码分析整理笔记(七)
element-ui源码的版本是2.4.9 pagination.js import Pager from './pager.vue'; import ElSelect from 'element-u ...
随机推荐
- Android一些日常的错误
一.加载.so出现的一些问题 1. so文件 放进了优先级低的ABI目录 问题:如果你的项目中,有其他优先级更好的ABI目录,但是你把ABI文件方法放到了优先级低的目录,最后导致你的ABI文件无法被加 ...
- poj1149构图题
引题解: 这道题目的大意是这样的:⦁ 有 M 个猪圈(M ≤ 1000),每个猪圈里初始时有若干头猪.⦁ 一开始所有猪圈都是关闭的.⦁ 依次来了 N 个顾客(N ≤ 100),每个顾客分别会打开指定 ...
- maya2014卸载/安装失败/如何彻底卸载清除干净maya2014注册表和文件的方法
maya2014提示安装未完成,某些产品无法安装该怎样解决呢?一些朋友在win7或者win10系统下安装maya2014失败提示maya2014安装未完成,某些产品无法安装,也有时候想重新安装maya ...
- GET请求Referer限制绕过总结
作者:Vulkey_Chen 原文来自:GET请求Referer限制绕过总结 前言 在做测试的时候会遇见这样几个漏洞场景: JSONP跨域劫持 反射XSS GET请求类型攻击 但是,在相对安全的情况下 ...
- 分布式任务调度系统xxl-job相关问题补充
搭建xxl-job时可能会遇到的问题 邮箱配置不起作用报异常 以163邮箱为例,接收邮件需要开启POP3/STMP服务 光开启服务还不够,需要添加授权码 授权码为手动输入,可以与登录密码不同,所以服务 ...
- 简介 - RESTful
RESTful REST(Representational State Transfer,表现层状态转化),可以简单理解为"资源在网络中以某种表现形式进行状态转移" Resourc ...
- cmd窗口使用sftp命令非密钥和密钥登录SFTP服务器的两种方式
cmd窗口使用sftp命令非密钥和密钥登录SFTP服务器的两种方式 一.在Windows环境下搭建SFTP服务器可参见http://www.cnblogs.com/Kevin00/p/6341295. ...
- go http.Handler
http1 package main import ( "log" "net/http" "fmt" ) func main() { db: ...
- Spring Boot - 修改Tomcat默认的8080端口
前言 默认情况下,Spring Boot内置的Tomcat服务会使用8080端口启动,我们可以使用以下任何技巧去更改默认的Tomcat端口: 注:我们可以通过server.port=0配置,去自动配置 ...
- 【Java基本功】一文读懂String及其包装类的实现原理
String作为Java中最常用的引用类型,相对来说基本上都比较熟悉,无论在平时的编码过程中还是在笔试面试中,String都很受到青睐,然而,在使用String过程中,又有较多需要注意的细节之处. S ...