From 3cd200f7c2aea1b4e9546e3cfe36016e19595620 Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 5 Sep 2020 06:50:59 +0800 Subject: [PATCH 1/6] feat(Picker): add readonly prop (#7105) --- src/picker/PickerColumn.js | 15 ++++++++++++++- src/picker/README.md | 1 + src/picker/README.zh-CN.md | 1 + src/picker/index.js | 1 + src/picker/shared.ts | 1 + src/picker/test/index.spec.js | 15 +++++++++++++++ 6 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js index 758558389..0467a1950 100644 --- a/src/picker/PickerColumn.js +++ b/src/picker/PickerColumn.js @@ -31,6 +31,7 @@ export default createComponent({ props: { valueKey: String, + readonly: Boolean, allowHtml: Boolean, className: String, itemHeight: Number, @@ -99,6 +100,10 @@ export default createComponent({ }, onTouchStart(event) { + if (this.readonly) { + return; + } + this.touchStart(event); if (this.moving) { @@ -116,6 +121,10 @@ export default createComponent({ }, onTouchMove(event) { + if (this.readonly) { + return; + } + this.touchMove(event); if (this.direction === 'vertical') { @@ -137,6 +146,10 @@ export default createComponent({ }, onTouchEnd() { + if (this.readonly) { + return; + } + const distance = this.offset - this.momentumOffset; const duration = Date.now() - this.touchStartTime; const allowMomentum = @@ -164,7 +177,7 @@ export default createComponent({ }, onClickItem(index) { - if (this.moving) { + if (this.moving || this.readonly) { return; } diff --git a/src/picker/README.md b/src/picker/README.md index 619598f14..5f1f38fa5 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -249,6 +249,7 @@ export default { | value-key | Key of option text | _string_ | `text` | | toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` | | loading | Whether to show loading prompt | _boolean_ | `false` | +| readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` | | show-toolbar | Whether to show toolbar | _boolean_ | `false` | | allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` | | default-index | Default value index of single column picker | _number \| string_ | `0` | diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index b04dc9180..375f1c38a 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -272,6 +272,7 @@ export default { | value-key | 选项对象中，选项文字对应的键名 | _string_ | `text` | | toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` | | loading | 是否显示加载状态 | _boolean_ | `false` | +| readonly `v2.10.5` | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` | | show-toolbar | 是否显示顶部栏 | _boolean_ | `false` | | allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` | | default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` | diff --git a/src/picker/index.js b/src/picker/index.js index 140b2a4f3..004b8599a 100644 --- a/src/picker/index.js +++ b/src/picker/index.js @@ -323,6 +323,7 @@ export default createComponent({ genColumnItems() { return this.formattedColumns.map((item, columnIndex) => ( { window.getComputedStyle = originGetComputedStyle; }); + +test('readonly prop', () => { + const wrapper = mount(Picker, { + propsData: { + columns, + readonly: true, + }, + }); + + triggerDrag(wrapper.find('.van-picker-column'), 0, -100); + wrapper.find('.van-picker-column ul').trigger('transitionend'); + wrapper.findAll('.van-picker-column__item').at(3).trigger('click'); + + expect(wrapper.emitted('change')).toBeFalsy(); +}); From da193d0b719ffccc7fca078a21d8673f6717405b Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 5 Sep 2020 06:57:05 +0800 Subject: [PATCH 2/6] feat(Area): add readonly prop (#7106) --- src/area/README.md | 1 + src/area/README.zh-CN.md | 1 + src/area/index.js | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/area/README.md b/src/area/README.md index f8494fa0b..926aab7e7 100644 --- a/src/area/README.md +++ b/src/area/README.md @@ -64,6 +64,7 @@ To have a selected value，simply pass the `code` of target area to `value` prop | area-list | Area list data | _object_ | - | | columns-placeholder `v2.2.5` | Placeholder of columns | _string[]_ | `[]` | | loading | Whether to show loading prompt | _boolean_ | `false` | +| readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` | | item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` | | columns-num | Level of picker | _number \| string_ | `3` | | visible-item-count | Count of visible columns | _number \| string_ | `6` | diff --git a/src/area/README.zh-CN.md b/src/area/README.zh-CN.md index 5e2691ffe..3536587e2 100644 --- a/src/area/README.zh-CN.md +++ b/src/area/README.zh-CN.md @@ -64,6 +64,7 @@ Vue.use(Area); | area-list | 省市区数据，格式见下方 | _object_ | - | | columns-placeholder `v2.2.5` | 列占位提示文字 | _string[]_ | `[]` | | loading | 是否显示加载状态 | _boolean_ | `false` | +| readonly `v2.10.5` | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` | | item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` | | columns-num | 显示列数，3-省市区，2-省市，1-省 | _number \| string_ | `3` | | visible-item-count | 可见的选项个数 | _number \| string_ | `6` | diff --git a/src/area/index.js b/src/area/index.js index 293cf549c..cc13576ee 100644 --- a/src/area/index.js +++ b/src/area/index.js @@ -310,8 +310,9 @@ export default createComponent({ showToolbar valueKey="name" title={this.title} - loading={this.loading} columns={this.displayColumns} + loading={this.loading} + readonly={this.readonly} itemHeight={this.itemHeight} swipeDuration={this.swipeDuration} visibleItemCount={this.visibleItemCount} From 07f0b1b637805a741daa14e8d671c5d627504d5e Mon Sep 17 00:00:00 2001 From: neverland Date: Sat, 5 Sep 2020 06:59:02 +0800 Subject: [PATCH 3/6] feat(DatetimePicker): add readonly prop (#7107) --- src/datetime-picker/README.md | 1 + src/datetime-picker/README.zh-CN.md | 1 + src/datetime-picker/shared.js | 3 ++- 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index 44b5d09f2..6ef7d62be 100644 --- a/src/datetime-picker/README.md +++ b/src/datetime-picker/README.md @@ -256,6 +256,7 @@ export default { | cancel-button-text | Text of cancel button | _string_ | `Cancel` | | show-toolbar | Whether to show toolbar | _boolean_ | `true` | | loading | Whether to show loading prompt | _boolean_ | `false` | +| readonly `v2.10.5` | Whether to be readonly | _boolean_ | `false` | | filter | Option filter | _(type, vals) => vals_ | - | | formatter | Option text formatter | _(type, val) => val_ | - | | columns-order `v2.9.2` | Array for ordering columns, where item can be set to
`year`, `month`, `day`, `hour` and `minute` | _string[]_ | - | diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index 17fb28660..713997449 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/src/datetime-picker/README.zh-CN.md @@ -265,6 +265,7 @@ export default { | cancel-button-text | 取消按钮文字 | _string_ | `取消` | | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` | | loading | 是否显示加载状态 | _boolean_ | `false` | +| readonly `v2.10.5` | 是否为只读状态，只读状态下无法切换选项 | _boolean_ | `false` | | filter | 选项过滤函数 | _(type, vals) => vals_ | - | | formatter | 选项格式化函数 | _(type, val) => val_ | - | | columns-order `v2.9.2` | 自定义列排序数组, 子项可选值为
`year`、`month`、`day`、`hour`、`minute` | _string[]_ | - | diff --git a/src/datetime-picker/shared.js b/src/datetime-picker/shared.js index 45ad4a273..a3f9126cc 100644 --- a/src/datetime-picker/shared.js +++ b/src/datetime-picker/shared.js @@ -7,6 +7,7 @@ export const sharedProps = { ...pickerProps, value: null, filter: Function, + columnsOrder: Array, showToolbar: { type: Boolean, default: true, @@ -15,7 +16,6 @@ export const sharedProps = { type: Function, default: (type, value) => value, }, - columnsOrder: Array, }; export const TimePickerMixin = { @@ -94,6 +94,7 @@ export const TimePickerMixin = { Date: Sat, 5 Sep 2020 07:02:55 +0800 Subject: [PATCH 4/6] docs: update axure resource --- docs/markdown/design.zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/markdown/design.zh-CN.md b/docs/markdown/design.zh-CN.md index 4b63121a6..f3bb18ae9 100644 --- a/docs/markdown/design.zh-CN.md +++ b/docs/markdown/design.zh-CN.md @@ -26,9 +26,9 @@ Axure 元件库，由社区的 [@axure-tczy](https://github.com/axure-tczy) 同学贡献。 - + -下载 +下载