[improvement] Swipe: add indicator slot

youzan · Oct 12, 2018 · 7e8cb98 · 7e8cb98
1 parent 93b567f
commit 7e8cb98
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 9 deletions.
diff --git a/packages/swipe/demo/index.vue b/packages/swipe/demo/index.vue
@@ -43,6 +43,21 @@
         <van-swipe-item>4</van-swipe-item>
       </van-swipe>
     </demo-block>
+
+    <demo-block :title="$t('title6')">
+      <van-swipe @change="onChange">
+        <van-swipe-item>1</van-swipe-item>
+        <van-swipe-item>2</van-swipe-item>
+        <van-swipe-item>3</van-swipe-item>
+        <van-swipe-item>4</van-swipe-item>
+
+        <template slot="indicator">
+          <div class="custom-indicator">
+            {{ this.current + 1 }}/4
+          </div>
+        </template>
+      </van-swipe>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -54,19 +69,22 @@ export default {
       title3: '监听 change 事件',
       title4: '纵向滚动',
       title5: '设置滑块大小',
+      title6: '自定义指示器',
       message: '当前 Swipe 索引：'
     },
     'en-US': {
       title2: 'Image Lazyload',
       title3: 'Change Event',
       title4: 'Vertical Scrolling',
       title5: 'Set Swiper Item Size',
+      title6: 'Custom indicator',
       message: 'Current Swipe index:'
     }
   },
 
   data() {
     return {
+      current: 0,
       images: [
         'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg',
         'https://img.yzcdn.cn/public_files/2017/09/05/c0dab461920687911536621b345a0bc9.jpg',
@@ -78,6 +96,7 @@ export default {
 
   methods: {
     onChange(index) {
+      this.current = index;
       this.$toast(this.$t('message') + index);
     }
   }
@@ -124,5 +143,15 @@ export default {
       line-height: 200px;
     }
   }
+
+  .custom-indicator {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    padding: 2px 5px;
+    font-size: 12px;
+    color: #fff;
+    background: rgba(0, 0, 0, .1);
+  }
 }
 </style>
diff --git a/packages/swipe/en-US.md b/packages/swipe/en-US.md
@@ -88,6 +88,38 @@ export default {
 </van-swipe>
 ```
 
+#### Custom Indicator
+
+```html
+<van-swipe @change="onChange">
+  <van-swipe-item>1</van-swipe-item>
+  <van-swipe-item>2</van-swipe-item>
+  <van-swipe-item>3</van-swipe-item>
+  <van-swipe-item>4</van-swipe-item>
+
+  <template slot="indicator">
+    <div class="custom-indicator">
+      {{ this.current + 1 }}/4
+    </div>
+  </template>
+</van-swipe>
+```
+
+```js
+export default {
+  methods: {
+    data() {
+      return {
+        current: 0
+      }
+    },
+    onChange(index) {
+      this.current = index;
+    }
+  }
+}
+```
+
 ### API
 
 | Attribute | Description | Type | Default |

diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue
@@ -11,15 +11,18 @@
     >
       <slot />
     </div>
-    <div
-      v-if="showIndicators && count > 1"
-      :class="b('indicators', { vertical })"
-    >
-      <i
-        v-for="index in count"
-        :class="b('indicator', { active: index - 1 === activeIndicator })"
-      />
-    </div>
+    <slot name="indicator">
+      <div
+        v-if="showIndicators && count > 1"
+        :class="b('indicators', { vertical })"
+      >
+        <i
+          v-for="index in count"
+          :class="b('indicator', { active: index - 1 === activeIndicator })"
+        />
+      </div>
+    </slot>
+
   </div>
 </template>
 

diff --git a/packages/swipe/test/__snapshots__/demo.spec.js.snap b/packages/swipe/test/__snapshots__/demo.spec.js.snap
@@ -65,5 +65,18 @@ exports[`renders demo correctly 1`] = `
       <!---->
     </div>
   </div>
+  <div>
+    <div class="van-swipe">
+      <div class="van-swipe__track" style="width:0px;transition-duration:500ms;transform:translateX(0px);">
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">1</div>
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">2</div>
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
+        <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
+      </div>
+      <div class="custom-indicator">
+        1/4
+      </div>
+    </div>
+  </div>
 </div>
 `;
diff --git a/packages/swipe/zh-CN.md b/packages/swipe/zh-CN.md
@@ -88,6 +88,38 @@ export default {
 </van-swipe>
 ```
 
+#### 自定义指示器
+
+```html
+<van-swipe @change="onChange">
+  <van-swipe-item>1</van-swipe-item>
+  <van-swipe-item>2</van-swipe-item>
+  <van-swipe-item>3</van-swipe-item>
+  <van-swipe-item>4</van-swipe-item>
+
+  <template slot="indicator">
+    <div class="custom-indicator">
+      {{ this.current + 1 }}/4
+    </div>
+  </template>
+</van-swipe>
+```
+
+```js
+export default {
+  methods: {
+    data() {
+      return {
+        current: 0
+      }
+    },
+    onChange(index) {
+      this.current = index;
+    }
+  }
+}
+```
+
 ### API
 
 | 参数 | 说明 | 类型 | 默认值 |