feat(Swipe): indicator slot add active param (#8645)

* feat(Swipe): indicator slot add active param

* docs: upd

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>
+  <template #indicator="{ active }">
-    <div class="custom-indicator">{{ current + 1 }}/4</div>
+    <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      |
+| Name                | Description      | SlotProps            |
-| --------- | ---------------- |
+| ------------------- | ---------------- | -------------------- |
-| default   | Content          |
+| default             | Content          | -                    |
-| indicator | Custom indicator |
+| indicator `v3.0.16` | Custom indicator | _{ active: number }_ |
 
 ### Less Variables
 

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>
+  <template #indicator="{ active }">
-    <div class="custom-indicator">{{ current + 1 }}/4</div>
+    <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   | 轮播内容     |
+| default             | 轮播内容     | -                    |
-| indicator | 自定义指示器 |
+| indicator `v3.0.16` | 自定义指示器 | _{ active: number }_ |
 
 ### 样式变量
 

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 (

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="{ active }">
-      <template #indicator>
+        <div class="custom-indicator">{{ active + 1 }}/4</div>
-        <div class="custom-indicator">{{ current + 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 onChange = (index: number) => Toast(t('message') + index);
-    const onChange2 = (index: number) => {
-      current.value = index;
-    };
 
     return {
       t,
       images,
-      current,
+      onChange,
-      onChange1,
-      onChange2,
     };
   },
 };