added height props

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`
                 }
             }

src/components/carousel/carousel.vue

@@ -5,7 +5,6 @@
         </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>
@@ -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}`
-                    {
-                        [`${prefixCls}-vertical`]: this.vertical
-                    }
                 ];
             },
             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.listWidth = parseInt(getStyle(this.$el, 'width'));
+                this.updatePos();
-                    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.updateOffset();
-                this.$nextTick(() => {
+            },
-                    this.trackLeft = this.currentIndex * this.listWidth;
+            height () {
-                });
+                this.updatePos();
             }
         },
         ready () {

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;

test/routers/carousel.vue

@@ -23,6 +23,8 @@
             <i-button @click="push">Push</i-button>
             <i-button @click="remove = true">Remove Front</i-button>
         </i-col>
+    </Row>
+    <Row>
         <i-col span="4">
             <p>Dots</p>
             <Button-group>
@@ -46,14 +48,21 @@
                 <i-button @click="arrow = 'never'">Never</i-button>
             </Button-group>
         </i-col>
+        <i-col span="4">
+            Height
+            <i-button @click="height = 'auto'">Auto</i-button>
+            <i-button @click="height = 80">Manual</i-button>
+            <Slider v-if="height !== 'auto'" :value.sync="height" :min="50" :max="200"></Slider>
+        </i-col>
     </Row>
-    <Carousel style="width: 50%; border: solid 1px #000"
+    <Carousel style="width: 50%; border: solid 1px #000; margin-top: 20px;"
         :current-index.sync="currentIndex"
         :autoplay="autoplay"
         :autoplay-speed="autoplaySpeed"
         :dots="dots"
         :trigger="trigger"
         :arrow="arrow"
+        :height="height"
         @on-change="slideChange"
         easing="linear">
         <Carousel-item v-if="!remove">
@@ -64,6 +73,11 @@
                 </template>
             </Alert>
         </Carousel-item>
+        <Carousel-item>
+            <div style="height: 100%; min-height: 20px; background: #f50; position: relative;">
+                <p style="position: absolute; width: 100%; color: #fff; top: 50%; height: 20px; line-height: 20px; margin-top: -10px; text-align: center">test font 定高测试</p>
+            </div>
+        </Carousel-item>
         <Carousel-item style="text-align: center">
             <Icon type="checkmark" style="font-size: 5em"></Icon>
         </Carousel-item>
@@ -73,7 +87,7 @@
         </Carousel-item>
     </Carousel>
     <div>
-        <p v-for="item in log">{{item}}</p>
+        <p v-for="item in log" track-by="$index">{{item}}</p>
     </div>
 </template>
 <script>
@@ -88,6 +102,7 @@
                 arrow: 'hover',
                 trigger: 'click',
                 dots: 'inside',
+                height: 'auto',
                 log: []
             }
         },