diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
index e60a50e..c0092d9 100644
--- a/src/components/carousel/carousel-item.vue
+++ b/src/components/carousel/carousel-item.vue
@@ -11,6 +11,7 @@
return {
prefixCls: prefixCls,
width: 0,
+ height: 'auto',
left: 0
};
},
@@ -18,6 +19,7 @@
styles () {
return {
width: `${this.width}px`,
+ height: `${this.height}`,
left: `${this.left}px`
}
}
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 55d1944..17d383b 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -5,7 +5,6 @@
@@ -56,13 +55,13 @@
type: String,
default: 'click'
},
- vertical: {
- type: Boolean,
- default: false
- },
currentIndex: {
type: Number,
default: 0
+ },
+ height: {
+ type: [String, Number],
+ default: 'auto'
}
},
data () {
@@ -70,25 +69,23 @@
prefixCls: prefixCls,
listWidth: 0,
trackWidth: 0,
- trackLeft: 0,
+ trackOffset: 0,
slides: [],
slideInstances: [],
- timer: null
+ timer: null,
+ ready: false
}
},
computed: {
classes () {
return [
- `${prefixCls}`,
- {
- [`${prefixCls}-vertical`]: this.vertical
- }
+ `${prefixCls}`
];
},
trackStyles () {
return {
width: `${this.trackWidth}px`,
- transform: `translate3d(-${this.trackLeft}px, 0px, 0px)`,
+ transform: `translate3d(-${this.trackOffset}px, 0px, 0px)`,
transition: `transform 500ms ${this.easing}`
};
},
@@ -103,11 +100,6 @@
`${prefixCls}-dots`,
`${prefixCls}-dots-${this.dots}`
]
- },
- activeDot (n) {
- return {
- [`${prefixCls}-vertical`]: this.currentIndex === n
- }
}
},
methods: {
@@ -125,7 +117,7 @@
}
};
- if (this.slideInstances.length) {
+ if (this.slideInstances.length || !this.$children) {
this.slideInstances.forEach((child) => {
find(child);
});
@@ -157,6 +149,7 @@
updatePos () {
this.findChild((child) => {
child.width = this.listWidth;
+ child.height = typeof this.height === 'number' ? `${this.height}px` : this.height;
});
this.trackWidth = (this.slides.length || 0) * this.listWidth;
@@ -172,10 +165,8 @@
});
},
handleResize () {
- this.$nextTick(() => {
- this.listWidth = parseInt(getStyle(this.$el, 'width'));
- this.updatePos();
- });
+ this.listWidth = parseInt(getStyle(this.$el, 'width'));
+ this.updatePos();
},
add (offset) {
let index = this.currentIndex;
@@ -198,6 +189,12 @@
this.add(1);
}, this.autoplaySpeed);
}
+ },
+ updateOffset () {
+ this.$nextTick(() => {
+ this.handleResize();
+ this.trackOffset = this.currentIndex * this.listWidth;
+ });
}
},
compiled () {
@@ -211,10 +208,10 @@
this.setAutoplay();
},
currentIndex (val, oldVal) {
- this.$emit('on-change', oldVal, val);
- this.$nextTick(() => {
- this.trackLeft = this.currentIndex * this.listWidth;
- });
+ this.updateOffset();
+ },
+ height () {
+ this.updatePos();
}
},
ready () {
diff --git a/src/styles/components/carousel.less b/src/styles/components/carousel.less
index fda1001..066f12f 100644
--- a/src/styles/components/carousel.less
+++ b/src/styles/components/carousel.less
@@ -103,23 +103,24 @@
}
&-dots {
+ z-index: 10;
+
@padding: 7px;
+ display: none;
+
position: relative;
&-inside {
+ display: block;
position: absolute;
bottom: 10px - @padding;
}
&-outside {
+ display: block;
margin-top: 10px - @padding;
}
- display: block;
- &-none {
- display: none;
- }
-
list-style: none;
text-align: center;
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 20e3ad4..82a45d4 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -23,6 +23,8 @@
Push
Remove Front
+
+
Dots
@@ -46,14 +48,21 @@
Never
+
+ Height
+ Auto
+ Manual
+
+
-
@@ -64,6 +73,11 @@
+
+
+
@@ -73,7 +87,7 @@