From 4d27e8b9698cf0c61f5d62d2876888b2cf2ea2bf Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 1 May 2021 17:31:20 +0800
Subject: [PATCH] feat(Swipe): indicator slot add active param (#8645)

* feat(Swipe): indicator slot add active param

* docs: upd
---
 src/swipe/README.md       | 31 +++++++------------------------
 src/swipe/README.zh-CN.md | 31 +++++++------------------------
 src/swipe/Swipe.tsx       |  4 +++-
 src/swipe/demo/index.vue  | 20 ++++++--------------
 4 files changed, 23 insertions(+), 63 deletions(-)

diff --git a/src/swipe/README.md b/src/swipe/README.md
index 74736107b..33a61d46b 100644
--- a/src/swipe/README.md
+++ b/src/swipe/README.md
@@ -115,13 +115,13 @@ export default {
 ### Custom Indicator
 
 ```html
-<van-swipe @change="onChange">
+<van-swipe>
   <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 #indicator>
-    <div class="custom-indicator">{{ current + 1 }}/4</div>
+  <template #indicator="{ active }">
+    <div class="custom-indicator">{{ active + 1 }}/4</div>
   </template>
 </van-swipe>
 
@@ -137,23 +137,6 @@ export default {
 </style>
 ```
 
-```js
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const current = ref(0);
-    const onChange = (index) => {
-      current.value = index;
-    };
-    return {
-      current,
-      onChange,
-    };
-  },
-};
-```
-
 ## API
 
 ### Swipe Props
@@ -204,10 +187,10 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe
 
 ### Swipe Slots
 
-| Name      | Description      |
-| --------- | ---------------- |
-| default   | Content          |
-| indicator | Custom indicator |
+| Name                | Description      | SlotProps            |
+| ------------------- | ---------------- | -------------------- |
+| default             | Content          | -                    |
+| indicator `v3.0.16` | Custom indicator | _{ active: number }_ |
 
 ### Less Variables
 
diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md
index 209b55500..d5eefa161 100644
--- a/src/swipe/README.zh-CN.md
+++ b/src/swipe/README.zh-CN.md
@@ -123,13 +123,13 @@ export default {
 通过 `indicator` 插槽可以自定义指示器的样式。
 
 ```html
-<van-swipe @change="onChange">
+<van-swipe>
   <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 #indicator>
-    <div class="custom-indicator">{{ current + 1 }}/4</div>
+  <template #indicator="{ active }">
+    <div class="custom-indicator">{{ active + 1 }}/4</div>
   </template>
 </van-swipe>
 
@@ -145,23 +145,6 @@ export default {
 </style>
 ```
 
-```js
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const current = ref(0);
-    const onChange = (index) => {
-      current.value = index;
-    };
-    return {
-      current,
-      onChange,
-    };
-  },
-};
-```
-
 ## API
 
 ### Swipe Props
@@ -212,10 +195,10 @@ export default {
 
 ### Swipe Slots
 
-| 名称      | 说明         |
-| --------- | ------------ |
-| default   | 轮播内容     |
-| indicator | 自定义指示器 |
+| 名称                | 说明         | 参数                 |
+| ------------------- | ------------ | -------------------- |
+| default             | 轮播内容     | -                    |
+| indicator `v3.0.16` | 自定义指示器 | _{ active: number }_ |
 
 ### 样式变量
 
diff --git a/src/swipe/Swipe.tsx b/src/swipe/Swipe.tsx
index d2b7065de..6bb055163 100644
--- a/src/swipe/Swipe.tsx
+++ b/src/swipe/Swipe.tsx
@@ -392,7 +392,9 @@ export default defineComponent({
 
     const renderIndicator = () => {
       if (slots.indicator) {
-        return slots.indicator();
+        return slots.indicator({
+          active: activeIndicator.value,
+        });
       }
       if (props.showIndicators && count.value > 1) {
         return (
diff --git a/src/swipe/demo/index.vue b/src/swipe/demo/index.vue
index f5eaaed3a..fee5cffcd 100644
--- a/src/swipe/demo/index.vue
+++ b/src/swipe/demo/index.vue
@@ -17,7 +17,7 @@
   </demo-block>
 
   <demo-block :title="t('title3')">
-    <van-swipe indicator-color="white" @change="onChange1">
+    <van-swipe indicator-color="white" @change="onChange">
       <van-swipe-item>1</van-swipe-item>
       <van-swipe-item>2</van-swipe-item>
       <van-swipe-item>3</van-swipe-item>
@@ -50,21 +50,19 @@
   </demo-block>
 
   <demo-block :title="t('title6')">
-    <van-swipe @change="onChange2">
+    <van-swipe>
       <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 #indicator>
-        <div class="custom-indicator">{{ current + 1 }}/4</div>
+      <template #indicator="{ active }">
+        <div class="custom-indicator">{{ active + 1 }}/4</div>
       </template>
     </van-swipe>
   </demo-block>
 </template>
 
 <script lang="ts">
-import { ref } from 'vue';
 import { useTranslate } from '@demo/use-translate';
 import { Toast } from '../../toast';
 
@@ -90,7 +88,6 @@ const i18n = {
 export default {
   setup() {
     const t = useTranslate(i18n);
-    const current = ref(0);
     const images = [
       'https://img.yzcdn.cn/vant/apple-1.jpg',
       'https://img.yzcdn.cn/vant/apple-2.jpg',
@@ -98,17 +95,12 @@ export default {
       'https://img.yzcdn.cn/vant/apple-4.jpg',
     ];
 
-    const onChange1 = (index: number) => Toast(t('message') + index);
-    const onChange2 = (index: number) => {
-      current.value = index;
-    };
+    const onChange = (index: number) => Toast(t('message') + index);
 
     return {
       t,
       images,
-      current,
-      onChange1,
-      onChange2,
+      onChange,
     };
   },
 };