Merge pull request #2181 from lisafra/update-carousel
Update carousel component: add loop and radiusDot property
This commit is contained in:
Aresn
GitHub
commit
69460a549c
4 changed files with 110 additions and 19 deletions
|
|
@ -1,10 +1,8 @@
|
|||
<template>
|
||||
<div>
|
||||
<Carousel v-model="v1" dots="inside" trigger="hover">
|
||||
<Carousel v-model="v1" dots="inside" trigger="hover" autoplay loop radius-dot>
|
||||
<Carousel-item>
|
||||
<Card>
|
||||
<div class="demo-carousel">1</div>
|
||||
</Card>
|
||||
<div class="demo-carousel">1</div>
|
||||
</Carousel-item>
|
||||
<Carousel-item>
|
||||
<div class="demo-carousel">2</div>
|
||||
|
|
@ -24,8 +22,8 @@
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
v1: 1
|
||||
}
|
||||
v1: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
push () {
|
||||
|
|
|
|||
|
|
@ -27,6 +27,15 @@
|
|||
mounted () {
|
||||
this.$parent.slotChange();
|
||||
},
|
||||
watch: {
|
||||
width (val) {
|
||||
if (val && this.$parent.loop) {
|
||||
this.$nextTick(() => {
|
||||
this.$parent.initCopyTrackDom();
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$parent.slotChange();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,11 @@
|
|||
<Icon type="chevron-left"></Icon>
|
||||
</button>
|
||||
<div :class="[prefixCls + '-list']">
|
||||
<div :class="[prefixCls + '-track']" :style="trackStyles">
|
||||
<div :class="[prefixCls + '-track', showCopyTrack ? '' : 'higher']" :style="trackStyles" ref="originTrack">
|
||||
<slot></slot>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-track', showCopyTrack ? 'higher' : '']" :style="copyTrackStyles" ref="copyTrack" v-if="loop">
|
||||
</div>
|
||||
</div>
|
||||
<button :class="arrowClasses" class="right" @click="arrowEvent(1)">
|
||||
<Icon type="chevron-right"></Icon>
|
||||
|
|
@ -16,7 +18,7 @@
|
|||
<li :class="[n - 1 === currentIndex ? prefixCls + '-active' : '']"
|
||||
@click="dotsEvent('click', n - 1)"
|
||||
@mouseover="dotsEvent('hover', n - 1)">
|
||||
<button></button>
|
||||
<button :class="[radiusDot ? 'radius' : '']"></button>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
|
@ -48,6 +50,10 @@
|
|||
type: Number,
|
||||
default: 2000
|
||||
},
|
||||
loop: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
easing: {
|
||||
type: String,
|
||||
default: 'ease'
|
||||
|
|
@ -59,6 +65,10 @@
|
|||
return oneOf(value, ['inside', 'outside', 'none']);
|
||||
}
|
||||
},
|
||||
radiusDot: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
trigger: {
|
||||
type: String,
|
||||
default: 'click',
|
||||
|
|
@ -84,11 +94,16 @@
|
|||
listWidth: 0,
|
||||
trackWidth: 0,
|
||||
trackOffset: 0,
|
||||
trackCopyOffset: 0,
|
||||
showCopyTrack: false,
|
||||
slides: [],
|
||||
slideInstances: [],
|
||||
timer: null,
|
||||
ready: false,
|
||||
currentIndex: this.value
|
||||
currentIndex: this.value,
|
||||
trackIndex: this.value,
|
||||
copyTrackIndex: this.value,
|
||||
hideTrackPos: -1, // 默认左滑
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -100,10 +115,19 @@
|
|||
trackStyles () {
|
||||
return {
|
||||
width: `${this.trackWidth}px`,
|
||||
transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
|
||||
transform: `translate3d(${-this.trackOffset}px, 0px, 0px)`,
|
||||
transition: `transform 500ms ${this.easing}`
|
||||
};
|
||||
},
|
||||
copyTrackStyles () {
|
||||
return {
|
||||
width: `${this.trackWidth}px`,
|
||||
transform: `translate3d(${-this.trackCopyOffset}px, 0px, 0px)`,
|
||||
transition: `transform 500ms ${this.easing}`,
|
||||
position: 'absolute',
|
||||
top: 0
|
||||
};
|
||||
},
|
||||
arrowClasses () {
|
||||
return [
|
||||
`${prefixCls}-arrow`,
|
||||
|
|
@ -142,6 +166,12 @@
|
|||
});
|
||||
}
|
||||
},
|
||||
// copy trackDom
|
||||
initCopyTrackDom () {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.copyTrack.innerHTML = this.$refs.originTrack.innerHTML;
|
||||
});
|
||||
},
|
||||
updateSlides (init) {
|
||||
let slides = [];
|
||||
let index = 1;
|
||||
|
|
@ -158,7 +188,6 @@
|
|||
});
|
||||
|
||||
this.slides = slides;
|
||||
|
||||
this.updatePos();
|
||||
},
|
||||
updatePos () {
|
||||
|
|
@ -185,21 +214,57 @@
|
|||
this.updatePos();
|
||||
this.updateOffset();
|
||||
},
|
||||
updateTrackPos (index) {
|
||||
if (this.showCopyTrack) {
|
||||
this.trackIndex = index;
|
||||
} else {
|
||||
this.copyTrackIndex = index;
|
||||
}
|
||||
},
|
||||
updateTrackIndex (index) {
|
||||
if (this.showCopyTrack) {
|
||||
this.copyTrackIndex = index;
|
||||
} else {
|
||||
this.trackIndex = index;
|
||||
}
|
||||
},
|
||||
add (offset) {
|
||||
let index = this.currentIndex;
|
||||
// 获取单个轨道的图片数
|
||||
let slidesLen = this.slides.length;
|
||||
// 如果是无缝滚动，需要初始化双轨道位置
|
||||
if (this.loop) {
|
||||
if (offset > 0) {
|
||||
// 初始化左滑轨道位置
|
||||
this.hideTrackPos = -1;
|
||||
} else {
|
||||
// 初始化右滑轨道位置
|
||||
this.hideTrackPos = slidesLen;
|
||||
}
|
||||
this.updateTrackPos(this.hideTrackPos);
|
||||
}
|
||||
// 获取当前展示图片的索引值
|
||||
let index = this.showCopyTrack ? this.copyTrackIndex : this.trackIndex;
|
||||
index += offset;
|
||||
while (index < 0) index += this.slides.length;
|
||||
index = index % this.slides.length;
|
||||
this.currentIndex = index;
|
||||
this.$emit('input', index);
|
||||
while (index < 0) index += slidesLen;
|
||||
if (((offset > 0 && index === slidesLen) || (offset < 0 && index === slidesLen - 1)) && this.loop) {
|
||||
// 极限值（左滑：当前索引为总图片张数， 右滑：当前索引为总图片张数 - 1）切换轨道
|
||||
this.showCopyTrack = !this.showCopyTrack;
|
||||
this.trackIndex += offset;
|
||||
this.copyTrackIndex += offset;
|
||||
} else {
|
||||
if (!this.loop) index = index % this.slides.length;
|
||||
this.updateTrackIndex(index);
|
||||
}
|
||||
this.$emit('input', index === this.slides.length ? 0 : index);
|
||||
},
|
||||
arrowEvent (offset) {
|
||||
this.setAutoplay();
|
||||
this.add(offset);
|
||||
},
|
||||
dotsEvent (event, n) {
|
||||
if (event === this.trigger && this.currentIndex !== n) {
|
||||
this.currentIndex = n;
|
||||
let curIndex = this.showCopyTrack ? this.copyTrackIndex : this.trackIndex;
|
||||
if (event === this.trigger && curIndex !== n) {
|
||||
this.updateTrackIndex(n);
|
||||
this.$emit('input', n);
|
||||
// Reset autoplay timer when trigger be activated
|
||||
this.setAutoplay();
|
||||
|
|
@ -215,7 +280,10 @@
|
|||
},
|
||||
updateOffset () {
|
||||
this.$nextTick(() => {
|
||||
this.trackOffset = this.currentIndex * this.listWidth;
|
||||
/* hack: revise copyTrack offset (1px) */
|
||||
let ofs = this.copyTrackIndex > 0 ? -1 : 1;
|
||||
this.trackOffset = this.trackIndex * this.listWidth;
|
||||
this.trackCopyOffset = this.copyTrackIndex * this.listWidth + ofs;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
@ -228,6 +296,11 @@
|
|||
},
|
||||
currentIndex (val, oldVal) {
|
||||
this.$emit('on-change', oldVal, val);
|
||||
},
|
||||
trackIndex () {
|
||||
this.updateOffset();
|
||||
},
|
||||
copyTrackIndex () {
|
||||
this.updateOffset();
|
||||
},
|
||||
height () {
|
||||
|
|
|
|||
|
|
@ -31,6 +31,9 @@
|
|||
overflow: hidden;
|
||||
|
||||
z-index: 1;
|
||||
&.higher {
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
&-item {
|
||||
|
|
@ -159,6 +162,11 @@
|
|||
color: transparent;
|
||||
|
||||
transition: all .5s;
|
||||
&.radius {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover > button {
|
||||
|
|
@ -168,6 +176,9 @@
|
|||
&.@{carousel-prefix-cls}-active > button {
|
||||
opacity: 1;
|
||||
width: 24px;
|
||||
&.radius{
|
||||
width: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue