From a3579a88e48831eee6921855b2423ba3f68b47dc Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 4 Jun 2018 20:08:50 +0800 Subject: [PATCH 1/3] [Improvement] Field: support v-model.number (#1221) --- packages/field/en-US.md | 2 +- packages/field/index.vue | 13 +++++----- .../test/__snapshots__/demo.spec.js.snap | 16 ++++--------- packages/field/test/field.spec.js | 1 + packages/field/zh-CN.md | 2 +- .../test/__snapshots__/demo.spec.js.snap | 24 +++++-------------- 6 files changed, 19 insertions(+), 39 deletions(-) diff --git a/packages/field/en-US.md b/packages/field/en-US.md index e9e633932..3a2ba7e28 100644 --- a/packages/field/en-US.md +++ b/packages/field/en-US.md @@ -114,7 +114,7 @@ Field support all native properties of input tag，such as `maxlength`、`placeh | Attribute | Description | Type | Default | |-----------|-----------|-----------|-------------| -| value | Field value | `String` | - | +| value | Field value | `String | Number` | - | | label | Field label | `String` | - | | type | Input type | `String` | `text` | | disabled | Disable field | `Boolean` | `false` | diff --git a/packages/field/index.vue b/packages/field/index.vue index f5a597b4b..0337f9ae7 100644 --- a/packages/field/index.vue +++ b/packages/field/index.vue @@ -8,7 +8,7 @@ :class="b({ error, disabled: $attrs.disabled, - 'has-icon': hasIcon, + 'has-icon': showIcon, 'min-height': type === 'textarea' && !autosize })" > @@ -35,8 +35,7 @@ :class="b('error-message')" />
@@ -60,7 +59,7 @@ export default create({ inheritAttrs: false, props: { - value: null, + value: [String, Number], icon: String, label: String, error: Boolean, @@ -91,8 +90,8 @@ export default create({ }, computed: { - hasIcon() { - return this.$slots.icon || this.icon; + showIcon() { + return this.$slots.icon || (this.icon && this.value !== '' && this.isDef(this.value)); }, listeners() { @@ -117,7 +116,7 @@ export default create({ onKeypress(event) { if (this.type === 'number') { const { keyCode } = event; - const allowPoint = this.value.indexOf('.') === -1; + const allowPoint = String(this.value).indexOf('.') === -1; const isValidKey = (keyCode >= 48 && keyCode <= 57) || (keyCode === 46 && allowPoint) || keyCode === 45; if (!isValidKey) { event.preventDefault(); diff --git a/packages/field/test/__snapshots__/demo.spec.js.snap b/packages/field/test/__snapshots__/demo.spec.js.snap index 0921f9529..bb94c1097 100644 --- a/packages/field/test/__snapshots__/demo.spec.js.snap +++ b/packages/field/test/__snapshots__/demo.spec.js.snap @@ -19,7 +19,7 @@ exports[`renders demo correctly 1`] = `
-
+
用户名 @@ -27,11 +27,7 @@ exports[`renders demo correctly 1`] = `
- +
@@ -119,7 +115,7 @@ exports[`renders demo correctly 1`] = `
-
+
短信验证码 @@ -127,11 +123,7 @@ exports[`renders demo correctly 1`] = `
- +
diff --git a/packages/field/test/field.spec.js b/packages/field/test/field.spec.js index 80c5b3ab4..2d40b2adf 100644 --- a/packages/field/test/field.spec.js +++ b/packages/field/test/field.spec.js @@ -14,6 +14,7 @@ test('click icon event', () => { const onIconClick = jest.fn(); const wrapper = mount(Field, { propsData: { + value: 'a', icon: 'search', onIconClick } diff --git a/packages/field/zh-CN.md b/packages/field/zh-CN.md index d7300b784..71abb34f3 100644 --- a/packages/field/zh-CN.md +++ b/packages/field/zh-CN.md @@ -117,7 +117,7 @@ Field 默认支持 Input 标签所有的原生属性，比如 `maxlength`、`pla | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------|-------------| | label | 标签 | `String` | - | -| value | 当前输入的值 | `String` | - | +| value | 当前输入的值 | `String | Number` | - | | type | 可设置为任意原生类型, 如 `number` `tel` `textarea` | `String` | `text` | | disabled | 是否禁用输入框 | `Boolean` | `false` | | error | 是否将输入内容标红 | `Boolean` | `false` | diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap index f01da008c..965e7043a 100644 --- a/packages/search/test/__snapshots__/demo.spec.js.snap +++ b/packages/search/test/__snapshots__/demo.spec.js.snap @@ -7,17 +7,13 @@ exports[`renders demo correctly 1`] = ` -
+
- +
@@ -31,17 +27,13 @@ exports[`renders demo correctly 1`] = ` -
+
- +
@@ -57,17 +49,13 @@ exports[`renders demo correctly 1`] = ` -
+
- +
From b33c8ef5f2dc63e3de3e73d6d820fd6554a346d2 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 5 Jun 2018 09:39:02 +0800 Subject: [PATCH 2/3] [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 | 滚动到目标位置 | From 9b3b17cb421dc72f3635e8f89aa09a7efb30a372 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 5 Jun 2018 11:57:52 +0800 Subject: [PATCH 3/3] [Improvement] Dialog: support custom className (#1224) --- packages/dialog/dialog.vue | 3 ++- packages/dialog/en-US.md | 7 ++++--- packages/dialog/index.js | 1 + packages/dialog/zh-CN.md | 7 ++++--- 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue index b67e435d7..49a22647e 100644 --- a/packages/dialog/dialog.vue +++ b/packages/dialog/dialog.vue @@ -1,6 +1,6 @@