feat(Picker): add readonly prop (#7105)

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;
       }
 

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` |

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` |

src/picker/index.js

@@ -323,6 +323,7 @@ export default createComponent({
     genColumnItems() {
       return this.formattedColumns.map((item, columnIndex) => (
         <PickerColumn
+          readonly={this.readonly}
           valueKey={this.valueKey}
           allowHtml={this.allowHtml}
           className={item.className}

src/picker/shared.ts

@@ -13,6 +13,7 @@ export const DEFAULT_ITEM_HEIGHT = 44;
 export const pickerProps = {
   title: String,
   loading: Boolean,
+  readonly: Boolean,
   itemHeight: [Number, String],
   showToolbar: Boolean,
   cancelButtonText: String,

src/picker/test/index.spec.js

@@ -279,3 +279,18 @@ test('set rem item-height', async () => {
 
   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();
+});