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 + + + + @@ -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 + + + +``` + +```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`] = ` +
+
+
+
1
+
2
+
3
+
4
+
+
+ 1/4 +
+
+
`; 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 + + + +``` + +```js +export default { + methods: { + data() { + return { + current: 0 + } + }, + onChange(index) { + this.current = index; + } + } +} +``` + ### API | 参数 | 说明 | 类型 | 默认值 |