Merge branch 'dev' into next

src/picker/PickerColumn.js

@@ -31,6 +31,7 @@ export default createComponent({
 
   props: {
     valueKey: String,
+    readonly: Boolean,
     allowHtml: Boolean,
     className: String,
     itemHeight: Number,
@@ -101,6 +102,10 @@ export default createComponent({
     },
 
     onTouchStart(event) {
+      if (this.readonly) {
+        return;
+      }
+
       this.touchStart(event);
 
       if (this.moving) {
@@ -118,6 +123,10 @@ export default createComponent({
     },
 
     onTouchMove(event) {
+      if (this.readonly) {
+        return;
+      }
+
       this.touchMove(event);
 
       if (this.direction === 'vertical') {
@@ -139,6 +148,10 @@ export default createComponent({
     },
 
     onTouchEnd() {
+      if (this.readonly) {
+        return;
+      }
+
       const distance = this.offset - this.momentumOffset;
       const duration = Date.now() - this.touchStartTime;
       const allowMomentum =
@@ -166,7 +179,7 @@ export default createComponent({
     },
 
     onClickItem(index) {
-      if (this.moving) {
+      if (this.moving || this.readonly) {
         return;
       }
 

src/picker/README.md

@@ -249,11 +249,11 @@ export default {
 | toolbar-position | Toolbar position, cat be set to `bottom` | _string_ | `top` |
 | loading | Whether to show loading prompt | _boolean_ | `false` |
 | show-toolbar | Whether to show toolbar | _boolean_ | `true` |
-| allow-html `v2.1.8` | Whether to allow HTML in option text | _boolean_ | `true` |
+| allow-html | Whether to allow HTML in option text | _boolean_ | `true` |
 | default-index | Default value index of single column picker | _number \| string_ | `0` |
 | item-height `v2.8.6` | Option height, supports `px` `vw` `rem` unit, default `px` | _number \| string_ | `44` |
 | visible-item-count | Count of visible columns | _number \| string_ | `6` |
-| swipe-duration `v2.2.10` | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
+| swipe-duration | Duration of the momentum animation，unit `ms` | _number \| string_ | `1000` |
 
 ### Events
 

src/picker/README.zh-CN.md

@@ -272,11 +272,11 @@ export default {
 | toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` |
 | loading | 是否显示加载状态 | _boolean_ | `false` |
 | show-toolbar | 是否显示顶部栏 | _boolean_ | `true` |
-| allow-html `v2.1.8` | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
+| allow-html | 是否允许选项内容中渲染 HTML | _boolean_ | `true` |
 | default-index | 单列选择时，默认选中项的索引 | _number \| string_ | `0` |
 | item-height `v2.8.6` | 选项高度，支持 `px` `vw` `rem` 单位，默认 `px` | _number \| string_ | `44` |
 | visible-item-count | 可见的选项个数 | _number \| string_ | `6` |
-| swipe-duration `v2.2.10` | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |
+| swipe-duration | 快速滑动时惯性滚动的时长，单位 `ms` | _number \| string_ | `1000` |
 
 ### Events
 

src/picker/index.js

@@ -308,6 +308,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],
   cancelButtonText: String,
   confirmButtonText: 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();
+});