added horizontal dots
This commit is contained in:
Rijn
parent
373dfb3cad
commit
e9989f2b85
3 changed files with 189 additions and 47 deletions
|
|
@ -1,20 +1,26 @@
|
|||
<template>
|
||||
<div :class="classes">
|
||||
<div :class="[prefixCls + '-arrow', 'left']" @click="add(-1)">
|
||||
<div class='placeholder'></div>
|
||||
<Icon type="arrow-left-b"></Icon>
|
||||
</div>
|
||||
<button :class="arrowClasses" class="left" @click="add(-1)">
|
||||
<Icon type="chevron-left"></Icon>
|
||||
</button>
|
||||
<div :class="[prefixCls + '-list']">
|
||||
<div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
|
||||
<!-- opacity: 1; width: 4480px; transform: translate3d(-1120px, 0px, 0px); -->
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-arrow', 'right']" @click="add(1)">
|
||||
<div class='placeholder'></div>
|
||||
<Icon type="arrow-right-b"></Icon>
|
||||
</div>
|
||||
<!-- dots -->
|
||||
<button :class="arrowClasses" class="right" @click="add(1)">
|
||||
<Icon type="chevron-right"></Icon>
|
||||
</button>
|
||||
<ul :class="dotsClasses">
|
||||
<template v-for="n in slides.length">
|
||||
<li :class="{ [`${prefixCls}-active`]: n === currentIndex }"
|
||||
@click="dotsEvent('click', n)"
|
||||
@mouseover="dotsEvent('hover', n)">
|
||||
<button></button>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -26,9 +32,9 @@
|
|||
export default {
|
||||
name: 'Carousel',
|
||||
props: {
|
||||
arrows: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
arrow: {
|
||||
type: String,
|
||||
default: 'hover'
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
|
|
@ -43,8 +49,12 @@
|
|||
default: 'ease'
|
||||
},
|
||||
dots: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
type: String,
|
||||
default: 'inside'
|
||||
},
|
||||
trigger: {
|
||||
type: String,
|
||||
default: 'click'
|
||||
},
|
||||
vertical: {
|
||||
type: Boolean,
|
||||
|
|
@ -66,7 +76,6 @@
|
|||
timer: null
|
||||
}
|
||||
},
|
||||
// events: before-change(from, to), after-change(current, from)
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
|
|
@ -82,6 +91,23 @@
|
|||
transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
|
||||
transition: `transform 500ms ${this.easing}`
|
||||
};
|
||||
},
|
||||
arrowClasses () {
|
||||
return [
|
||||
`${prefixCls}-arrow`,
|
||||
`${prefixCls}-arrow-${this.arrow}`
|
||||
]
|
||||
},
|
||||
dotsClasses () {
|
||||
return [
|
||||
`${prefixCls}-dots`,
|
||||
`${prefixCls}-arrow-${this.dots}`
|
||||
]
|
||||
},
|
||||
activeDot (n) {
|
||||
return {
|
||||
[`${prefixCls}-vertical`]: this.currentIndex === n
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -156,10 +182,14 @@
|
|||
index += offset;
|
||||
while (index < 0) index += this.slides.length;
|
||||
index = index % this.slides.length;
|
||||
this.$emit('on-change', this.currentIndex, index);
|
||||
this.currentIndex = index;
|
||||
},
|
||||
slide () {
|
||||
this.trackLeft = this.currentIndex * this.listWidth;
|
||||
dotsEvent (event, n) {
|
||||
if (event === this.trigger) {
|
||||
this.$emit('on-change', this.currentIndex, n);
|
||||
this.currentIndex = n;
|
||||
}
|
||||
},
|
||||
setAutoplay () {
|
||||
window.clearInterval(this.timer);
|
||||
|
|
@ -182,7 +212,7 @@
|
|||
},
|
||||
currentIndex () {
|
||||
this.$nextTick(() => {
|
||||
this.slide();
|
||||
this.trackLeft = this.currentIndex * this.listWidth;
|
||||
});
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -41,40 +41,123 @@
|
|||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
|
||||
text-align: center;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.placeholder{
|
||||
overflow: hidden;
|
||||
width: 0;
|
||||
min-height: inherit;
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
z-index: 3;
|
||||
|
||||
&.left {
|
||||
left: 0;
|
||||
}
|
||||
&.right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
width: 10%;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
display: none;
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 10;
|
||||
transform: translateY(-50%);
|
||||
|
||||
transition: .3s;
|
||||
background-color: rgba(31, 45, 61, .11);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: fade(#000, 30%);
|
||||
background-color: rgba(31, 45, 61, 0.5);
|
||||
}
|
||||
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
|
||||
& > * {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
&.left {
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&.right {
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
&-always {
|
||||
display: inherit;
|
||||
}
|
||||
|
||||
&-hover {
|
||||
display: inherit;
|
||||
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover &-arrow-hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-dots {
|
||||
@padding: 7px;
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px - @padding;
|
||||
|
||||
list-style: none;
|
||||
display: block;
|
||||
|
||||
text-align: center;
|
||||
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 3px + @padding * 2;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
|
||||
margin: 0 2px;
|
||||
padding: @padding 0;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
button {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
|
||||
background: #8391a5;
|
||||
opacity: 0.3;
|
||||
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 3px;
|
||||
|
||||
border-radius: 1px;
|
||||
outline: none;
|
||||
|
||||
font-size: 0;
|
||||
color: transparent;
|
||||
|
||||
-webkit-transition: all .5s;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
&:hover > button {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.@{carousel-prefix-cls}-active > button {
|
||||
opacity: 1;
|
||||
width: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,13 +21,39 @@
|
|||
</i-col>
|
||||
<i-col span="4">
|
||||
<i-button @click="push">Push</i-button>
|
||||
<i-button @click="remove = true">Remove</i-button>
|
||||
<i-button @click="remove = true">Remove Front</i-button>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<p>Dots</p>
|
||||
<Button-group>
|
||||
<i-button @click="dots = 'inside'">Inside</i-button>
|
||||
<i-button @click="dots = 'outside'">Outside</i-button>
|
||||
<i-button @click="dots = 'none'">None</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
<p>Trigger</p>
|
||||
<Button-group>
|
||||
<i-button @click="trigger = 'click'">Click</i-button>
|
||||
<i-button @click="trigger = 'hover'">Hover</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
<i-col span="4">
|
||||
Arrow
|
||||
<Button-group>
|
||||
<i-button @click="arrow = 'hover'">Hover</i-button>
|
||||
<i-button @click="arrow = 'always'">Always</i-button>
|
||||
<i-button @click="arrow = 'never'">Never</i-button>
|
||||
</Button-group>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Carousel style="width: 50%; border: solid 1px #000"
|
||||
:current-index.sync="currentIndex"
|
||||
:autoplay="autoplay"
|
||||
:autoplay-speed="autoplaySpeed"
|
||||
:dots="dots"
|
||||
:trigger="trigger"
|
||||
:arrow="arrow"
|
||||
easing="linear">
|
||||
<Carousel-item v-if="!remove">
|
||||
<Alert type="warning" show-icon>
|
||||
|
|
@ -54,7 +80,10 @@
|
|||
autoplay: true,
|
||||
autoplaySpeed: 2000,
|
||||
remove: false,
|
||||
pushItem: []
|
||||
pushItem: [],
|
||||
arrow: 'hover',
|
||||
trigger: 'click',
|
||||
dots: 'inside'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue