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(); +});