From bb71140e7ba5139c5391222940fcb381ca33bf18 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 2 Mar 2017 15:36:39 +0800
Subject: [PATCH] support Carousel

support Carousel @rijn you can review when you are free
---
 CHANGE.md                                 |   4 +-
 README.md                                 |   4 +-
 src/components/carousel/carousel-item.vue |   8 +-
 src/components/carousel/carousel.vue      |  26 +--
 src/index.js                              |   6 +-
 test/app.vue                              |   1 +
 test/main.js                              |   4 +
 test/routers/carousel.vue                 | 207 +++-------------------
 8 files changed, 57 insertions(+), 203 deletions(-)

diff --git a/CHANGE.md b/CHANGE.md
index a03f2936..70016e24 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -19,4 +19,6 @@ class 改为了 className
 ### Upload 
 父级不能 computed Upload 的 fileList 了
 ### Collapse
-废弃 activeKey，使用 v-model，key 是保留的，更名为 name
\ No newline at end of file
+废弃 activeKey，使用 v-model，key 是保留的，更名为 name
+### Carousel
+废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的
\ No newline at end of file
diff --git a/README.md b/README.md
index eea0dc95..ead257bf 100644
--- a/README.md
+++ b/README.md
@@ -42,12 +42,12 @@
 - [ ] Modal
 - [x] Progress
 - [x] Badge
-- [ ] Collapse
+- [x] Collapse
 - [x] Timeline
 - [x] Tag
 - [ ] Tooltip
 - [ ] Poptip
-- [ ] Carousel
+- [x] Carousel
 - [ ] Tree
 - [ ] Menu
 - [ ] Tabs
diff --git a/src/components/carousel/carousel-item.vue b/src/components/carousel/carousel-item.vue
index 7381afc4..758fe729 100644
--- a/src/components/carousel/carousel-item.vue
+++ b/src/components/carousel/carousel-item.vue
@@ -1,12 +1,12 @@
 <template>
-    <div :class="prefixCls" v-bind:style="styles"><slot></slot></div>
+    <div :class="prefixCls" :style="styles"><slot></slot></div>
 </template>
 <script>
     const prefixCls = 'ivu-carousel-item';
 
     export default {
         componentName: 'carousel-item',
-
+        name: 'CarouselItem',
         data () {
             return {
                 prefixCls: prefixCls,
@@ -24,10 +24,12 @@
                 };
             }
         },
-        compiled () {
+        mounted () {
+            // todo while
             this.$parent.slotChange();
         },
         beforeDestroy () {
+            // todo while
             this.$parent.slotChange();
         }
     };
diff --git a/src/components/carousel/carousel.vue b/src/components/carousel/carousel.vue
index 16c43265..3e4724ae 100644
--- a/src/components/carousel/carousel.vue
+++ b/src/components/carousel/carousel.vue
@@ -4,7 +4,7 @@
             <Icon type="chevron-left"></Icon>
         </button>
         <div :class="[prefixCls + '-list']">
-            <div :class="[prefixCls + '-track']" :style="trackStyles" v-el:slides>
+            <div :class="[prefixCls + '-track']" :style="trackStyles">
                 <slot></slot>
             </div>
         </div>
@@ -13,9 +13,9 @@
         </button>
         <ul :class="dotsClasses">
             <template v-for="n in slides.length">
-                <li :class="[n === currentIndex ? prefixCls + '-active' : '']"
-                    @click="dotsEvent('click', n)"
-                    @mouseover="dotsEvent('hover', n)">
+                <li :class="[n - 1 === currentIndex ? prefixCls + '-active' : '']"
+                    @click="dotsEvent('click', n - 1)"
+                    @mouseover="dotsEvent('hover', n - 1)">
                     <button></button>
                 </li>
             </template>
@@ -65,7 +65,7 @@
                     return oneOf(value, ['click', 'hover']);
                 }
             },
-            currentIndex: {
+            value: {
                 type: Number,
                 default: 0
             },
@@ -86,7 +86,8 @@
                 slides: [],
                 slideInstances: [],
                 timer: null,
-                ready: false
+                ready: false,
+                currentIndex: this.value
             };
         },
         computed: {
@@ -140,7 +141,7 @@
                     });
                 }
             },
-            updateSlides (init ) {
+            updateSlides (init) {
                 let slides = [];
                 let index = 1;
 
@@ -189,6 +190,7 @@
                 while (index < 0) index += this.slides.length;
                 index = index % this.slides.length;
                 this.currentIndex = index;
+                this.$emit('input', index);
             },
             arrowEvent (offset) {
                 this.setAutoplay();
@@ -197,6 +199,7 @@
             dotsEvent (event, n) {
                 if (event === this.trigger && this.currentIndex !== n) {
                     this.currentIndex = n;
+                    this.$emit('input', n);
                     // Reset autoplay timer when trigger be activated
                     this.setAutoplay();
                 }
@@ -215,9 +218,6 @@
                 });
             }
         },
-        compiled () {
-            this.updateSlides(true);
-        },
         watch: {
             autoplay () {
                 this.setAutoplay();
@@ -231,9 +231,13 @@
             },
             height () {
                 this.updatePos();
+            },
+            value (val) {
+                this.currentIndex = val;
             }
         },
-        ready () {
+        mounted () {
+            this.updateSlides(true);
             this.handleResize();
             this.setAutoplay();
             window.addEventListener('resize', this.handleResize, false);
diff --git a/src/index.js b/src/index.js
index c970dc50..de48edf4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -8,7 +8,7 @@ import Badge from './components/badge';
 // import Breadcrumb from './components/breadcrumb';
 import Button from './components/button';
 // import Card from './components/card';
-// import Carousel from './components/carousel';
+import Carousel from './components/carousel';
 // import Cascader from './components/cascader';
 import Checkbox from './components/checkbox';
 // import Circle from './components/circle';
@@ -57,8 +57,8 @@ const iview = {
     Button,
     ButtonGroup: Button.Group,
     // Card,
-    // Carousel,
-    // CarouselItem: Carousel.Item,
+    Carousel,
+    CarouselItem: Carousel.Item,
     // Cascader,
     Checkbox,
     CheckboxGroup: Checkbox.Group,
diff --git a/test/app.vue b/test/app.vue
index 5af50c8c..0c014272 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -29,6 +29,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/progress">Progress</router-link></li>
                 <li><router-link to="/upload">Upload</router-link></li>
                 <li><router-link to="/collapse">Collapse</router-link></li>
+                <li><router-link to="/carousel">Carousel</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 2bd3495d..36ab8d9c 100644
--- a/test/main.js
+++ b/test/main.js
@@ -80,6 +80,10 @@ const router = new VueRouter({
         {
             path: '/collapse',
             component: require('./routers/collapse.vue')
+        },
+        {
+            path: '/carousel',
+            component: require('./routers/carousel.vue')
         }
     ]
 });
diff --git a/test/routers/carousel.vue b/test/routers/carousel.vue
index 0171d80c..682b5704 100644
--- a/test/routers/carousel.vue
+++ b/test/routers/carousel.vue
@@ -1,197 +1,28 @@
 <template>
-    <Row>
-        <i-col span="2">
-            Current Index
-            <p>{{ currentIndex }}</p>
-        </i-col>
-        <i-col span="2">
-            <p>Autoplay</p>
-            <Switch :checked.sync="autoplay" size="small"></Switch>
-        </i-col>
-        <i-col span="4">
-            Speed <Slider :value.sync="autoplaySpeed" :min="300" :max="5000"></Slider>
-        </i-col>
-        <i-col span="4">
-            Switch To
-            <Button-group>
-                <i-button @click="currentIndex = 0">0</i-button>
-                <i-button @click="currentIndex = 1">1</i-button>
-                <i-button @click="currentIndex = 2">2</i-button>
-            </Button-group>
-        </i-col>
-        <i-col span="4">
-            <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>
-                <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>
-        <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; 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">
-            <Alert type="warning" show-icon>
-                警告提示文案
-                <template slot="desc">
-                    警告的提示描述文案警告的提示描述文案警告的提示描述文案
-                </template>
-            </Alert>
-        </Carousel-item>
-        <Carousel-item>
-            <div style="height: 150px; 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>
-            <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>
-            <Card style="width:350px">
-                <p slot="title">
-                    <Icon type="ios-film-outline"></Icon>
-                    经典电影
-                </p>
-                <a href="#" slot="extra">
-                    <Icon type="ios-loop-strong"></Icon>
-                    换一换
-                </a>
-                <ul>
-
-                </ul>
-            </Card>
-        </Carousel-item>
-        <Carousel-item style="text-align: center">
-            <Icon type="checkmark" style="font-size: 5em"></Icon>
-        </Carousel-item>
-        <Carousel-item>test3</Carousel-item>
-        <Carousel-item v-for="item in pushItem" track-by="$index">
-            <Icon type="checkmark" style="font-size: 5em"></Icon>{{item}}
-        </Carousel-item>
-    </Carousel>
-    <div style="max-height: 200px; overflow: scroll">
-        <p v-for="item in log" track-by="$index">{{item}}</p>
-    </div>
-
-    <Card style="width:350px">
-        <p slot="title">
-            <Icon type="ios-film-outline"></Icon>
-            经典电影
-        </p>
-        <Carousel>
-            <Carousel-item v-if="!remove">
-                <Alert type="warning" show-icon>
-                    警告提示文案
-                    <template slot="desc">
-                        警告的提示描述文案警告的提示描述文案警告的提示描述文案
-                    </template>
-                </Alert>
+    <div>
+        <Carousel v-model="v1" dots="inside" trigger="hover">
+            <Carousel-item>
+                <div class="demo-carousel">1</div>
             </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>
+                <div class="demo-carousel">2</div>
             </Carousel-item>
-            <Carousel-item style="text-align: center">
-                <Icon type="checkmark" style="font-size: 5em"></Icon>
+            <Carousel-item>
+                <div class="demo-carousel">3</div>
+            </Carousel-item>
+            <Carousel-item>
+                <div class="demo-carousel">4</div>
             </Carousel-item>
         </Carousel>
-    </Card>
-    <Tabs>
-        <Tab-pane label="标签一">
-            <Carousel>
-                <Carousel-item v-if="!remove">
-                    <Alert type="warning" show-icon>
-                        警告提示文案
-                        <template slot="desc">
-                            警告的提示描述文案警告的提示描述文案警告的提示描述文案
-                        </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>
-            </Carousel>
-        </Tab-pane>
-        <Tab-pane label="标签二" disabled>标签二的内容</Tab-pane>
-        <Tab-pane label="标签三">
-            <Carousel>
-                <Carousel-item v-if="!remove">
-                    <Alert type="warning" show-icon>
-                        警告提示文案
-                        <template slot="desc">
-                            警告的提示描述文案警告的提示描述文案警告的提示描述文案
-                        </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>
-            </Carousel>
-        </Tab-pane>
-    </Tabs>
+        {{ v1 }}
+        <div @click="v1 = 0">change v1</div>
+    </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                currentIndex: 0,
-                autoplay: true,
-                autoplaySpeed: 2000,
-                remove: false,
-                pushItem: [],
-                arrow: 'hover',
-                trigger: 'click',
-                dots: 'inside',
-                height: 'auto',
-                log: []
+                v1: 1
             }
         },
         methods: {
@@ -204,3 +35,13 @@
         }
     }
 </script>
+<style>
+    .demo-carousel{
+        height: 200px;
+        line-height: 200px;
+        text-align: center;
+        color: #fff;
+        font-size: 20px;
+        background: #506b9e;
+    }
+</style>
\ No newline at end of file