blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* feat(Swipe): indicator slot add active param

* docs: upd
This commit is contained in:
neverland 2021-05-01 17:31:20 +08:00 committed by GitHub
parent b0129722cf
commit 4d27e8b969
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/swipe/README.md
View File

@ -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

31
src/swipe/README.zh-CN.md
View File

@ -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 }_ |
### 样式变量

4
src/swipe/Swipe.tsx
View File

@ -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 (

20
src/swipe/demo/index.vue
View File

@ -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,
};
},
};