update props and events

Rijn
1 parent 6c9acb08
Showing 4 changed files with 61 additions and 5 deletions Show diff stats
src/components/carousel/carousel.vue
src/styles/components/carousel.less
src/styles/components/index.less
test/routers/carousel.vue
 <template>
-    <div :class="prefixCls">
+    <div :class="classes">
+        <slot></slot>
     </div>
 </template>
 <script>
-    const prefixCls = 'ivu-cascader';
+    import Icon from '../icon/icon.vue';
+
+    const prefixCls = 'ivu-carousel';
     export default {
-        name: 'Carousel'
+        name: 'Carousel',
+        props: {
+            arrows: {
+                type: Boolean,
+                default: false
+            },
+            autoplay: {
+                type: Boolean,
+                default: true
+            },
+            autoplaySpeed: {
+                type: Number,
+                default: 2000
+            },
+            easing: {
+                type: String,
+                default: 'ease'
+            },
+            dots: {
+                type: Boolean,
+                default: true
+            },
+            fade: {
+                type: Boolean,
+                default: false
+            },
+            vertical: {
+                type: Boolean,
+                default: false
+            }
+        },
+        // events: before-change(from, to), after-change(current, from)
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-vertical`]: this.vertical
+                    }
+                ];
+            }
+        }
     };
 </script>
@@ -2,5 +2,10 @@
 @carousel-item-prefix-cls: ~"@{css-prefix}carousel-item";
 .@{carousel-prefix-cls} {
-
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    user-select: none;
+    touch-action: pan-y;
+    -webkit-tap-highlight-color: transparent;
 }
@@ -34,4 +34,5 @@
 @import "menu";
 @import "date-picker";
 @import "time-picker";
-@import "form";
 \ No newline at end of file
+@import "form";
+@import "carousel";
 \ No newline at end of file
 <template>
     <Carousel>
+        <Carousel-item>test1</Carousel-item>
+        <Carousel-item>test2</Carousel-item>
+        <Carousel-item>test3</Carousel-item>
+    </Carousel>
+
+    <Carousel :vertical="true">
         <Carousel-item></Carousel-item>
     </Carousel>
 </template>