first
This commit is contained in:
Ivan
8
packages/carousel/index.js
Normal file
8
packages/carousel/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import Carousel from './src/main';
|
||||
|
||||
/* istanbul ignore next */
|
||||
Carousel.install = function(Vue) {
|
||||
Vue.component(Carousel.name, Carousel);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
137
packages/carousel/src/item.vue
Normal file
137
packages/carousel/src/item.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<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="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,
|
||||
animating: false
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
processIndex(index, activeIndex, length) {
|
||||
if (activeIndex === 0 && index === length - 1) {
|
||||
return -1;
|
||||
} else if (activeIndex === length - 1 && index === 0) {
|
||||
return length;
|
||||
} else if (index < activeIndex - 1 && activeIndex - index >= length / 2) {
|
||||
return length + 1;
|
||||
} else if (index > activeIndex + 1 && index - activeIndex >= length / 2) {
|
||||
return -2;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
|
||||
calcCardTranslate(index, activeIndex) {
|
||||
const parentWidth = this.$parent.$el.offsetWidth;
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
if (index !== activeIndex && length > 2 && this.$parent.loop) {
|
||||
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;
|
||||
this.active = index === activeIndex;
|
||||
this.translate = this.calcCardTranslate(index, activeIndex);
|
||||
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;
|
||||
},
|
||||
|
||||
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>
|
||||
304
packages/carousel/src/main.vue
Normal file
304
packages/carousel/src/main.vue
Normal file
@@ -0,0 +1,304 @@
|
||||
<template>
|
||||
<div
|
||||
:class="carouselClasses"
|
||||
@mouseenter.stop="handleMouseEnter"
|
||||
@mouseleave.stop="handleMouseLeave">
|
||||
<div
|
||||
class="el-carousel__container"
|
||||
:style="{ height: height }">
|
||||
<transition
|
||||
v-if="arrowDisplay"
|
||||
name="carousel-arrow-left">
|
||||
<button
|
||||
type="button"
|
||||
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
|
||||
v-if="arrowDisplay"
|
||||
name="carousel-arrow-right">
|
||||
<button
|
||||
type="button"
|
||||
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>
|
||||
<ul
|
||||
v-if="indicatorPosition !== 'none'"
|
||||
:class="indicatorsClasses">
|
||||
<li
|
||||
v-for="(item, index) in items"
|
||||
:key="index"
|
||||
:class="[
|
||||
'el-carousel__indicator',
|
||||
'el-carousel__indicator--' + direction,
|
||||
{ '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>
|
||||
import throttle from 'throttle-debounce/throttle';
|
||||
import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event';
|
||||
|
||||
export default {
|
||||
name: 'ElCarousel',
|
||||
|
||||
props: {
|
||||
initialIndex: {
|
||||
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: {
|
||||
type: String,
|
||||
default: 'hover'
|
||||
},
|
||||
type: String,
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
direction: {
|
||||
type: String,
|
||||
default: 'horizontal',
|
||||
validator(val) {
|
||||
return ['horizontal', 'vertical'].indexOf(val) !== -1;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
items: [],
|
||||
activeIndex: -1,
|
||||
containerWidth: 0,
|
||||
timer: null,
|
||||
hover: false
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
arrowDisplay() {
|
||||
return this.arrow !== 'never' && this.direction !== 'vertical';
|
||||
},
|
||||
|
||||
hasLabel() {
|
||||
return this.items.some(item => item.label.toString().length > 0);
|
||||
},
|
||||
|
||||
carouselClasses() {
|
||||
const classes = ['el-carousel', 'el-carousel--' + this.direction];
|
||||
if (this.type === 'card') {
|
||||
classes.push('el-carousel--card');
|
||||
}
|
||||
return classes;
|
||||
},
|
||||
|
||||
indicatorsClasses() {
|
||||
const classes = ['el-carousel__indicators', 'el-carousel__indicators--' + this.direction];
|
||||
if (this.hasLabel) {
|
||||
classes.push('el-carousel__indicators--labels');
|
||||
}
|
||||
if (this.indicatorPosition === 'outside' || this.type === 'card') {
|
||||
classes.push('el-carousel__indicators--outside');
|
||||
}
|
||||
return classes;
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
items(val) {
|
||||
if (val.length > 0) this.setActiveItem(this.initialIndex);
|
||||
},
|
||||
|
||||
activeIndex(val, oldVal) {
|
||||
this.resetItemPosition(oldVal);
|
||||
if (oldVal > -1) {
|
||||
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) {
|
||||
if (this.direction === 'vertical') return;
|
||||
this.items.forEach((item, index) => {
|
||||
if (arrow === this.itemInStage(item, index)) {
|
||||
item.hover = true;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleButtonLeave() {
|
||||
if (this.direction === 'vertical') return;
|
||||
this.items.forEach(item => {
|
||||
item.hover = false;
|
||||
});
|
||||
},
|
||||
|
||||
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() {
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
},
|
||||
|
||||
startTimer() {
|
||||
if (this.interval <= 0 || !this.autoplay || this.timer) return;
|
||||
this.timer = setInterval(this.playSlides, this.interval);
|
||||
},
|
||||
|
||||
setActiveItem(index) {
|
||||
if (typeof index === 'string') {
|
||||
const filteredItems = this.items.filter(item => item.name === index);
|
||||
if (filteredItems.length > 0) {
|
||||
index = this.items.indexOf(filteredItems[0]);
|
||||
}
|
||||
}
|
||||
index = Number(index);
|
||||
if (isNaN(index) || index !== Math.floor(index)) {
|
||||
console.warn('[Element Warn][Carousel]index must be an integer.');
|
||||
return;
|
||||
}
|
||||
let length = this.items.length;
|
||||
const oldIndex = this.activeIndex;
|
||||
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() {
|
||||
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);
|
||||
this.pauseTimer();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user