From b33c8ef5f2dc63e3de3e73d6d820fd6554a346d2 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 5 Jun 2018 09:39:02 +0800 Subject: [PATCH] [Improvement] Swipe: add swipeTo method (#1222) --- packages/picker/en-US.md | 29 +++--- packages/picker/zh-CN.md | 29 +++--- packages/sku/en-US.md | 8 +- packages/sku/zh-CN.md | 9 +- packages/swipe/en-US.md | 8 ++ packages/swipe/index.vue | 12 +++ packages/swipe/test/index.spec.js | 154 ++++++++++++++++++++++++++++++ packages/swipe/zh-CN.md | 8 ++ 8 files changed, 223 insertions(+), 34 deletions(-) create mode 100644 packages/swipe/test/index.spec.js diff --git a/packages/picker/en-US.md b/packages/picker/en-US.md index 3e75da986..e18755ac9 100644 --- a/packages/picker/en-US.md +++ b/packages/picker/en-US.md @@ -156,18 +156,19 @@ Picker events will pass different parameters according to the columns are single | defaultIndex | Default value index | | className | ClassName for this column | -### Picker instance -You can get the picker instance in 'change' event, and +### Methods -| Method | Description | -|-----------|-----------| -| getValues() | Get current values of all columns | -| setValues(values) | Set current values of all columns | -| getIndexes() | Get current indexes of all columns | -| setIndexes(indexes) | Set current indexes of all columns | -| getColumnValue(columnIndex) | Get current value of the column | -| setColumnValue(columnIndex, value) | Set current value of the column | -| getColumnIndex(columnIndex) | Get current index of the column | -| setColumnIndex(columnIndex, optionIndex) | Set current index of the column | -| getColumnValues(columnIndex) | Get columns data of the column | -| setColumnValues(columnIndex, values) | Set columns data of the column | +Use ref to get picker instance and call instance methods + +| Name | Attribute | Return value | Description | +|-----------|-----------|-----------|-------------| +| getValues | - | values | Get current values of all columns | +| setValues | values | - | Set current values of all columns | +| getIndexes | - | indexes | Get current indexes of all columns | +| setIndexes | indexes | - | Set current indexes of all columns | +| getColumnValue | columnIndex | value | Get current value of the column | +| setColumnValue | columnIndex, value | - | Set current value of the column | +| getColumnIndex | columnIndex | optionIndex | Get current index of the column | +| setColumnIndex | columnIndex, optionIndex | - | Set current index of the column | +| getColumnValues | columnIndex | values | Get columns data of the column | +| setColumnValue | columnIndex, values | - | Set columns data of the column | diff --git a/packages/picker/zh-CN.md b/packages/picker/zh-CN.md index 0824a3f6a..be9c4a0a5 100644 --- a/packages/picker/zh-CN.md +++ b/packages/picker/zh-CN.md @@ -159,18 +159,19 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数 | defaultIndex | 初始选中项的索引，默认为 0 | | className | 为对应列添加额外的`class` | -### Picker 实例 -在`change`事件中，可以获取到`picker`实例，通过实例方法可以灵活控制 Picker 内容 +### 方法 -| 函数 | 说明 | -|-----------|-----------| -| getValues() | 获取所有列选中的值，返回一个数组 | -| setValues(values) | 设置所有列选中的值 | -| getIndexes() | 获取所有列选中值对应的索引，返回一个数组 | -| setIndexes(indexes) | 设置所有列选中值对应的索引 | -| getColumnValue(columnIndex) | 获取对应列选中的值 | -| setColumnValue(columnIndex, value) | 设置对应列选中的值 | -| getColumnIndex(columnIndex) | 获取对应列选中项的索引 | -| setColumnIndex(columnIndex, optionIndex) | 设置对应列选中项的索引 | -| getColumnValues(columnIndex) | 获取对应列中所有选项 | -| setColumnValues(columnIndex, values) | 设置对应列中所有选项 | +通过 ref 可以获取到 picker 实例并调用实例方法 + +| 方法名 | 参数 | 返回值 | 介绍 | +|-----------|-----------|-----------|-------------| +| getValues | - | values | 获取所有列选中的值 | +| setValues | values | - | 设置所有列选中的值 | +| getIndexes | - | indexes | 获取所有列选中值对应的索引 | +| setIndexes | indexes | - | 设置所有列选中值对应的索引 | +| getColumnValue | columnIndex | value | 获取对应列选中的值 | +| setColumnValue | columnIndex, value | - | 设置对应列选中的值 | +| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 | +| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 | +| getColumnValues | columnIndex | values | 获取对应列中所有选项 | +| setColumnValue | columnIndex, values | - | 设置对应列中所有选项 | diff --git a/packages/sku/en-US.md b/packages/sku/en-US.md index 7b18d1dc2..a11141abb 100644 --- a/packages/sku/en-US.md +++ b/packages/sku/en-US.md @@ -111,9 +111,11 @@ Vue.use(Sku); ### Methods -| Method | Description | -|-----------|-----------| -| getSkuData() | Get current sku data | +Use ref to get sku instance and call instance methods + +| Name | Attribute | Return value | Description | +|-----------|-----------|-----------|-------------| +| getSkuData | - | skuData | Get current skuData | ### Slot diff --git a/packages/sku/zh-CN.md b/packages/sku/zh-CN.md index c18d09c36..fc143c913 100644 --- a/packages/sku/zh-CN.md +++ b/packages/sku/zh-CN.md @@ -112,11 +112,14 @@ Vue.use(Sku); ### 方法 -| 函数 | 说明 | -|-----------|-----------| -| getSkuData() | 获取当前 skuData | +通过 ref 可以获取到 sku 实例并调用实例方法 + +| 方法名 | 参数 | 返回值 | 介绍 | +|-----------|-----------|-----------|-------------| +| getSkuData | - | skuData | 获取当前 skuData | ### Slot + Sku 组件默认划分好了若干区块，这些区块都定义成了 slot，可以按需进行替换。区块顺序见下表： | 名称 | 说明 | diff --git a/packages/swipe/en-US.md b/packages/swipe/en-US.md index bbd0d7329..9d31625d3 100644 --- a/packages/swipe/en-US.md +++ b/packages/swipe/en-US.md @@ -94,3 +94,11 @@ export default { | Event | Description | Arguments | |-----------|-----------|-----------| | change | Triggered when current swipe change | index: index of current swipe | + +### Methods + +Use ref to get swipe instance and call instance methods + +| Name | Attribute | Return value | Description | +|-----------|-----------|-----------|-------------| +| swipeTo | index: 目标位置的索引 | void | 滚动到目标位置 | diff --git a/packages/swipe/index.vue b/packages/swipe/index.vue index 228926a5d..b19eed5b3 100644 --- a/packages/swipe/index.vue +++ b/packages/swipe/index.vue @@ -90,6 +90,8 @@ export default create({ autoplay(autoplay) { if (!autoplay) { this.clear(); + } else { + this.autoPlay(); } } }, @@ -206,6 +208,15 @@ export default create({ this.offset = offset - this.active * this.size; }, + swipeTo(index) { + this.swiping = true; + this.correctPosition(); + setTimeout(() => { + this.swiping = false; + this.move(index % this.count - this.active); + }, 30); + }, + correctPosition() { if (this.active <= -1) { this.move(this.count); @@ -221,6 +232,7 @@ export default create({ autoPlay() { const { autoplay } = this; + if (autoplay && this.count > 1) { this.clear(); this.timer = setTimeout(() => { diff --git a/packages/swipe/test/index.spec.js b/packages/swipe/test/index.spec.js new file mode 100644 index 000000000..608b30195 --- /dev/null +++ b/packages/swipe/test/index.spec.js @@ -0,0 +1,154 @@ +import Swipe from '..'; +import SwipeItem from '../../swipe-item'; +import { mount } from '@vue/test-utils'; +import { triggerDrag } from '../../../test/utils'; + +const Component = { + template: ` + + 1 + 2 + 3 + + `, + components: { + Swipe, + SwipeItem + }, + props: { + vertical: Boolean, + loop: { + type: Boolean, + default: true + }, + touchable: { + type: Boolean, + default: true + }, + autoplay: { + type: Number, + default: 0 + }, + initialSwipe: { + type: Number, + default: 0 + } + }, + data() { + return { + style: { + width: '100px', + height: '100px' + } + }; + } +}; + +test('autoplay', done => { + const wrapper = mount(Component, { + propsData: { + autoplay: 20 + } + }); + const { swipe } = wrapper.vm.$refs; + + setTimeout(() => { + expect(swipe.active).toEqual(1); + wrapper.setData({ autoplay: 0 }); + + setTimeout(() => { + expect(swipe.active).toEqual(1); + wrapper.setData({ autoplay: 20 }); + + setTimeout(() => { + expect(swipe.active).toEqual(2); + wrapper.destroy(); + done(); + }, 60); + }, 60); + }, 60); +}); + +test('swipeTo', done => { + const wrapper = mount(Component); + const { swipe } = wrapper.vm.$refs; + swipe.swipeTo(2); + + setTimeout(() => { + expect(swipe.active).toEqual(2); + done(); + }, 30); +}); + +test('initial swipe', () => { + const wrapper = mount(Component); + const { swipe } = wrapper.vm.$refs; + + expect(swipe.active).toEqual(0); + wrapper.setProps({ initialSwipe: 2 }); + expect(swipe.active).toEqual(2); +}); + +test('vertical swipe', () => { + const wrapper = mount(Component, { + propsData: { + vertical: true + } + }); + const { swipe } = wrapper.vm.$refs; + const track = wrapper.find('.van-swipe__track'); + + triggerDrag(track, 0, -100); + expect(swipe.active).toEqual(1); +}); + +test('untouchable', () => { + const wrapper = mount(Component, { + propsData: { + touchable: false + } + }); + const { swipe } = wrapper.vm.$refs; + const track = wrapper.find('.van-swipe__track'); + + triggerDrag(track, 100, 0); + expect(swipe.active).toEqual(0); +}); + +test('loop', () => { + const wrapper = mount(Component); + const { swipe } = wrapper.vm.$refs; + const track = wrapper.find('.van-swipe__track'); + + triggerDrag(track, -100, 0); + expect(swipe.active).toEqual(1); + triggerDrag(track, -100, 0); + expect(swipe.active).toEqual(2); + triggerDrag(track, -100, 0); + expect(swipe.active).toEqual(3); + triggerDrag(track, -100, 0); + expect(swipe.active).toEqual(1); + triggerDrag(track, 100, 0); + expect(swipe.active).toEqual(0); + triggerDrag(track, 100, 0); + expect(swipe.active).toEqual(-1); + triggerDrag(track, 100, 0); + expect(swipe.active).toEqual(1); +}); + +test('not loop', () => { + const wrapper = mount(Component, { + propsData: { + loop: false + } + }); + const { swipe } = wrapper.vm.$refs; + const track = wrapper.find('.van-swipe__track'); + + triggerDrag(track, -100, 0); + expect(swipe.active).toEqual(1); + triggerDrag(track, -100, 0); + expect(swipe.active).toEqual(2); + triggerDrag(track, -100, 0); + expect(swipe.active).toEqual(2); +}); diff --git a/packages/swipe/zh-CN.md b/packages/swipe/zh-CN.md index bcbdcdd7d..dd15e7089 100644 --- a/packages/swipe/zh-CN.md +++ b/packages/swipe/zh-CN.md @@ -94,3 +94,11 @@ export default { | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | change | 每一页轮播结束后触发 | index, 当前页的索引 | + +### 方法 + +通过 ref 可以获取到 swipe 实例并调用实例方法 + +| 方法名 | 参数 | 返回值 | 介绍 | +|-----------|-----------|-----------|-------------| +| swipeTo | index: 目标位置的索引 | void | 滚动到目标位置 |