diff --git a/packages/swipe/demo/index.vue b/packages/swipe/demo/index.vue
index a11e23670..0b7bb2e65 100644
--- a/packages/swipe/demo/index.vue
+++ b/packages/swipe/demo/index.vue
@@ -43,6 +43,21 @@
4
+
+
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ {{ this.current + 1 }}/4
+
+
+
+
@@ -54,6 +69,7 @@ export default {
title3: '监听 change 事件',
title4: '纵向滚动',
title5: '设置滑块大小',
+ title6: '自定义指示器',
message: '当前 Swipe 索引:'
},
'en-US': {
@@ -61,12 +77,14 @@ export default {
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);
+ }
}
diff --git a/packages/swipe/en-US.md b/packages/swipe/en-US.md
index 7afa67fc7..7d02254a2 100644
--- a/packages/swipe/en-US.md
+++ b/packages/swipe/en-US.md
@@ -88,6 +88,38 @@ export default {
```
+#### Custom Indicator
+
+```html
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ {{ this.current + 1 }}/4
+
+
+
+```
+
+```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
index 0b15918c3..b16ffa812 100644
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.vue
@@ -11,15 +11,18 @@
>
-
-
-
+
+
+
+
+
+
diff --git a/packages/swipe/test/__snapshots__/demo.spec.js.snap b/packages/swipe/test/__snapshots__/demo.spec.js.snap
index 527eead47..792575e65 100644
--- 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`] = `
+
`;
diff --git a/packages/swipe/zh-CN.md b/packages/swipe/zh-CN.md
index dd1ae5a96..c8ee53580 100644
--- a/packages/swipe/zh-CN.md
+++ b/packages/swipe/zh-CN.md
@@ -88,6 +88,38 @@ export default {
```
+#### 自定义指示器
+
+```html
+
+ 1
+ 2
+ 3
+ 4
+
+
+
+ {{ this.current + 1 }}/4
+
+
+
+```
+
+```js
+export default {
+ methods: {
+ data() {
+ return {
+ current: 0
+ }
+ },
+ onChange(index) {
+ this.current = index;
+ }
+ }
+}
+```
+
### API
| 参数 | 说明 | 类型 | 默认值 |