fix issue #41 #42

document/components/docs/en-US/slide.md

@@ -46,6 +46,14 @@
   }
   ```
 
+- Initial Index
+
+  Initial Index value, default 0.
+
+  ```html
+  <cube-slide :initial-index="1"></cube-slide>
+  ```
+
 - Loop play
 
   Loop play is turned on by default. You can cnfigure that with `loop` attribute.
@@ -88,16 +96,88 @@
   <cube-slide :speed="200"></cube-slide>
   ```
 
+
+- refresh method
+
+  When Slide Items updated or Slide props updated, you can call `refresh` method to update Slide view.
+
+  ```html
+  <cube-slide ref="slide">
+    <cube-slide-item v-for="(item, index) in items" :key="index">
+      <a :href="item.url">
+        <img :src="item.image">
+      </a>
+    </cube-slide-item>
+  </cube-slide>
+  ```
+  ```js
+  const item3 = {
+    url: 'http://www.didichuxing.com/',
+    image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+  }
+  export default {
+    data() {
+      return {
+        items: [
+          {
+            url: 'http://www.didichuxing.com/',
+            image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
+          },
+          {
+            url: 'http://www.didichuxing.com/',
+            image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+          }
+        ]
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.items.push(item3)
+        this.$refs.slide.refresh()
+      }, 2000)
+    }
+  }
+  ```
+
+  Added an new slide item 2 seconds later and called `refresh`.
+
+- Modify dots style
+
+  Default dot, you can change it by using dots slot.
+
+  ```html
+  <cube-slide>
+    <template slot="dots" slot-scope="props">
+      <span
+        class="my-dot"
+        :class="{active: props.current === index}"
+        v-for="(item, index) in props.dots">
+        {{index + 1}}
+      </span>
+    </template>
+  </cube-slide>
+  ```
+
+  The scoped slots provide two parameters: current active index `current` and slide items length `dots`.
+
 ### Props configuration
 
 | Attribute | Description | Type | Accepted Values | Default |
 | - | - | - | - | - |
+| initialIndex | initial index | Number | - | 0 |
 | loop | whether to loop play | Boolean | true/false | true |
 | autoPlay | whether to play  automatically | Boolean | true/false | true |
 | interval | interval of play | Number | - | 4000 |
 | threshold | sliding threshold of switching pages | Number | (0, 1) | 0.3 |
 | speed | speed of switching pages | Number | - | 400 |
 
+### Slot
+
+| Name | Description | Scope Parameters |
+| - | - | - |
+| default | Default content contains cube-slide-item components | - |
+| dots | Dots content | dots: Slide items length <br> current: current active index |
+
 ### Events
 
 | Event Name | Description | Parameters |

document/components/docs/zh-CN/slide.md

@@ -25,10 +25,12 @@
           {
             url: 'http://www.didichuxing.com/',
             image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
-          }, {
+          },
+          {
             url: 'http://www.didichuxing.com/',
             image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
-          }, {
+          },
+          {
             url: 'http://www.didichuxing.com/',
             image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
           }
@@ -46,12 +48,19 @@
   }
   ```
 
+- 初始索引
+
+  初始化时展示的位置索引值，默认为 0。
+
+  ```html
+  <cube-slide :initial-index="1"></cube-slide>
+  ```
+
 - 循环播放
 
   默认开启循环播放，可通过 loop 属性配置。
 
   ```html
-  <cube-slide></cube-slide>
   <cube-slide :loop="false"></cube-slide>
   ```
 
@@ -60,7 +69,6 @@
   默认开启自动播放，可通过 auto-play 属性配置。
 
   ```html
-  <cube-slide></cube-slide>
   <cube-slide :auto-play="false"></cube-slide>
   ```
 
@@ -78,6 +86,7 @@
 
   ```html
   <cube-slide :threshold="0.4"></cube-slide>
+  ```
 
 - 切换页面的速度
 
@@ -87,16 +96,82 @@
   <cube-slide :speed="200"></cube-slide>
   ```
 
+- refresh 方法
+
+  当新增或者删除 Slide Item 项或者修改 Slide 配置的时候，可以调用实例的 refresh 方法更新 Slide。
+
+  ```html
+  <cube-slide ref="slide">
+    <cube-slide-item v-for="(item, index) in items" :key="index">
+      <a :href="item.url">
+        <img :src="item.image">
+      </a>
+    </cube-slide-item>
+  </cube-slide>
+  ```
+  ```js
+  const item3 = {
+    url: 'http://www.didichuxing.com/',
+    image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+  }
+  export default {
+    data() {
+      return {
+        items: [
+          {
+            url: 'http://www.didichuxing.com/',
+            image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide01.png'
+          },
+          {
+            url: 'http://www.didichuxing.com/',
+            image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
+          }
+        ]
+      }
+    },
+    mounted() {
+      setTimeout(() => {
+        this.items.push(item3)
+        this.$refs.slide.refresh()
+      }, 2000)
+    }
+  }
+  ```
+
+  延迟 2 秒钟后新增一个 Slide Item，新增完成后需要调用 refresh 方法更新。
+
+- 修改 dots 内容
+
+  默认是点，可通过插槽修改。
+
+  ```html
+  <cube-slide>
+    <template slot="dots" slot-scope="props">
+      <span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
+    </template>
+  </cube-slide>
+  ```
+
+  作用域插槽提供了所需的当前索引值 `current` 以及长度 `dots`。
+
 ### Props 配置
 
 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
 | - | - | - | - | - |
+| initialIndex | 初始索引值 | Number | - | 0 |
 | loop | 是否循环播放 | Boolean | true/false | true |
 | autoPlay | 是否自动播放 | Boolean | true/false | true |
 | interval | 播放间隔 | Number | - | 4000 |
 | threshold | 切换页面的滑动阈值 | Number | (0, 1) | 0.3 |
 | speed | 切换页面的速度 | Number | - | 400 |
 
+### 插槽
+
+| 名字 | 说明 | 作用域参数 |
+| - | - | - |
+| default | 默认内容，由 cube-slide-item 构成 | - |
+| dots | dots 内容 | dots: 轮播项长度 <br> current: 当前索引 |
+
 ### 事件
 
 | 事件名 | 说明 | 参数 |

example/pages/slide.vue

@@ -5,6 +5,7 @@
         <cube-slide
           v-if="ifSlide"
           ref="slide"
+          :initial-index="initialIndex"
           :loop="loop"
           :auto-play="autoPlay"
           :interval="interval"
@@ -16,10 +17,17 @@
               <img :src="item.image">
             </a>
           </cube-slide-item>
+          <template v-if="dotsSlot" slot="dots" slot-scope="props">
+            <span class="my-dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
+          </template>
         </cube-slide>
       </div>
       <div class="options">
         <div class="option-list">
+          <div class="group">
+            <input-option class="item" name="InitialIndex" :value="initialIndex"
+                           @update:value="updateInitialIndex"></input-option>
+          </div>
           <div class="group">
             <switch-option class="item" name="Loop" :value="loop"
                            @update:value="updateLoop"></switch-option>
@@ -38,6 +46,14 @@
             <input-option class="item" name="Speed" :value="speed"
                            @update:value="updateSpeed"></input-option>
           </div>
+          <div class="group">
+            <switch-option class="item" name="Add Slide Item3" :value="addItem3"
+                           @update:value="updateItem3"></switch-option>
+          </div>
+          <div class="group">
+            <switch-option class="item" name="Dots Slot" :value="dotsSlot"
+                           @update:value="updateDotsSlot"></switch-option>
+          </div>
         </div>
       </div>
     </div>
@@ -49,6 +65,10 @@
   import SwitchOption from '../components/switch-option'
   import InputOption from '../components/input-option'
 
+  const item3 = {
+    url: 'http://www.didichuxing.com/',
+    image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
+  }
   export default{
     data() {
       return {
@@ -59,9 +79,6 @@
           }, {
             url: 'http://www.didichuxing.com/',
             image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide02.png'
-          }, {
-            url: 'http://www.didichuxing.com/',
-            image: '//webapp.didistatic.com/static/webapp/shield/cube-ui-examples-slide03.png'
           }
         ],
         ifSlide: true,
@@ -69,13 +86,19 @@
         autoPlay: true,
         interval: 4000,
         threshold: 0.3,
-        speed: 400
+        speed: 400,
+        initialIndex: 1,
+        dotsSlot: false,
+        addItem3: false
       }
     },
     watch: {
       loop() {
         this.rebuildSlide()
       },
+      dotsSlot() {
+        this.rebuildSlide()
+      },
       autoPlay() {
         this.rebuildSlide()
       },
@@ -87,6 +110,14 @@
       },
       speed() {
         this.rebuildSlide()
+      },
+      addItem3(newV) {
+        if (newV) {
+          this.items.push(item3)
+        } else {
+          this.items.pop()
+        }
+        this.rebuildSlide()
       }
     },
     methods: {
@@ -103,20 +134,40 @@
         //   this.ifSlide = true
         // })
       },
+      updateItem3(val) {
+        this.addItem3 = val
+      },
       updateLoop(val) {
         this.loop = val
       },
+      updateDotsSlot(val) {
+        this.dotsSlot = val
+      },
       updateAutoPlay(val) {
         this.autoPlay = val
       },
       updateInterval(val) {
-        this.interval = val
+        val = +val
+        if (val) {
+          this.interval = val
+        }
       },
       updateThreshold(val) {
-        this.threshold = val
+        val = +val
+        if (val) {
+          this.threshold = val
+        }
       },
       updateSpeed(val) {
-        this.speed = val
+        val = +val
+        if (val) {
+          this.speed = val
+        }
+      },
+      updateInitialIndex(val) {
+        if (val) {
+          this.initialIndex = +val
+        }
       }
     },
     components: {
@@ -135,4 +186,11 @@
     border-radius: 2px
     overflow: hidden
     box-shadow: 0 2px 9px #ddd
+    .cube-slide-dots
+      .my-dot
+        height: auto
+        font-size: 12px
+        background: none
+        &.active
+          color: #fc9153
 </style>

src/components/slide/slide.vue

@@ -4,7 +4,9 @@
       <slot></slot>
     </div>
     <div class="cube-slide-dots">
-      <span :class="{active: currentPageIndex === index}" v-for="(item, index) in dots"></span>
+      <slot name="dots" :current="currentPageIndex" :dots="dots">
+        <span :class="{active: currentPageIndex === index}" v-for="(item, index) in dots"></span>
+      </slot>
     </div>
   </div>
 </template>
@@ -18,6 +20,10 @@
   export default {
     name: COMPONENT_NAME,
     props: {
+      initialIndex: {
+        type: Number,
+        default: 0
+      },
       loop: {
         type: Boolean,
         default: true
@@ -42,7 +48,14 @@
     data() {
       return {
         dots: 0,
-        currentPageIndex: 0
+        currentPageIndex: this.initialIndex || 0
+      }
+    },
+    watch: {
+      initialIndex(newIndex) {
+        if (newIndex !== this.currentPageIndex) {
+          this.slide && this.slide.goToPage(newIndex)
+        }
       }
     },
     methods: {
@@ -53,7 +66,9 @@
           if (this.slide === null) {
             return
           }
-          this.currentPageIndex = 0
+          if (this.slide !== undefined) {
+            this.currentPageIndex = 0
+          }
           this.dots = 0
           this._setSlideWidth()
           this._initDots()
@@ -97,6 +112,8 @@
           observeDOM: false
         })
 
+        this.slide.goToPage(this.currentPageIndex, 0, 0)
+
         this.slide.on('scrollEnd', this._onScrollEnd)
 
         this.slide.on('touchend', () => {
@@ -113,9 +130,6 @@
       },
       _onScrollEnd() {
         let pageIndex = this.slide.getCurrentPage().pageX
-        if (this.loop) {
-          pageIndex -= 1
-        }
         if (this.currentPageIndex !== pageIndex) {
           this.currentPageIndex = pageIndex
           this.$emit(EVENT_CHANGE, this.currentPageIndex)
@@ -129,13 +143,9 @@
         this.dots = new Array(this.children.length)
       },
       _play() {
-        let pageIndex = this.currentPageIndex + 1
-        if (this.loop) {
-          pageIndex += 1
-        }
         clearTimeout(this._timer)
         this._timer = setTimeout(() => {
-          this.slide.goToPage(pageIndex, 0, 400)
+          this.slide.next()
         }, this.interval)
       },
       _deactivated() {