swipe add indicator

packages/swipe/src/swipe-item.vue

@@ -6,6 +6,11 @@
 
 <script>
 export default {
-  name: 'zan-swipe-item'
+  name: 'zan-swipe-item',
+
+
+  beforeCreate() {
+    this.$parent.swipes.push(this);
+  }
 };
 </script>

packages/swipe/src/swipe.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="zan-swipe">
-    <slot></slot>
+    <div class="zan-swipe__items">
+      <slot></slot>
+    </div>
+    <div class="zan-swipe__indicators" v-if="showIndicators">
+      <span class="zan-swipe__indicator" v-for="i in swipes.length" :class="{
+        'zan-swipe__indicator--active': currIndex === i -1
+      }">
+      </span>
+    </div>
   </div>
 </template>
 
@@ -13,13 +21,17 @@ export default {
   name: 'zan-swipe',
 
   props: {
-    autoPlay: {
+    autoPlay: Boolean,
+    showIndicators: {
       type: Boolean,
-      default: false
-    },
-    onPageChangeEnd: {
-      type: Function,
-      default: () => {}
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      currIndex: 0,
+      swipes: []
     }
   },
 
@@ -53,6 +65,13 @@ export default {
 
   updated() {
     this.scroll.update();
+  },
+
+  methods: {
+    onPageChangeEnd(page, currIndex) {
+      this.currIndex = +currIndex;
+      this.$emit('pagechange:end', page, currIndex);
+    }
   }
 };
 </script>

packages/zanui-css/src/swipe.css

@@ -1,24 +1,49 @@
+@import './common/var.css';
+
 @component-namespace zan {
-    @b swipe {
-        position: relative;
-        overflow: hidden;
-        width: 100%;
+  @b swipe {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+
+    @e indicators {
+      position: absolute;
+      bottom: 10px;
+      left: 50%;
+      transform: translateX(-50%);
     }
 
-    @b swipe-item {
-        display: none;
-        width: 100%;
-        height: 100%;
-        overflow: hidden;
-        text-align: center;
+    @e indicator {
+      width: 5px;
+      height: 5px;
+      display: inline-block;
+      border-radius: 100%;
+      background: #000;
+      opacity: .2;
+      margin: 0 3px;
+      z-index: 1;
 
-        img {
-            width: 100%;
-            height: auto;
-        }
-
-        &:first-child {
-            display: block;
-        }
+      @m active {
+        background: $c-orange;
+        opacity: 1;
+      }
     }
+  }
+
+  @b swipe-item {
+    display: none;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    text-align: center;
+
+    img {
+      width: 100%;
+      height: auto;
+    }
+
+    &:first-child {
+      display: block;
+    }
+  }
 }