diff --git a/src/picker/PickerColumn.js b/src/picker/PickerColumn.js
index e6a91317e..36cb892e5 100644
--- a/src/picker/PickerColumn.js
+++ b/src/picker/PickerColumn.js
@@ -3,6 +3,7 @@ import { createNamespace, isObject } from '../utils';
import { range } from '../utils/format/number';
import { preventDefault } from '../utils/dom/event';
import { TouchMixin } from '../mixins/touch';
+import { DEFAULT_ITEM_HEIGHT } from './shared';
const DEFAULT_DURATION = 200;
@@ -255,9 +256,11 @@ export default createComponent({
},
genOptions() {
- const optionStyle = {
- height: `${this.itemHeight}px`,
- };
+ const optionStyle = {};
+
+ if (this.itemHeight !== DEFAULT_ITEM_HEIGHT) {
+ optionStyle.height = `${this.itemHeight}px`;
+ }
return this.options.map((option, index) => {
const text = this.getOptionText(option);
diff --git a/src/picker/index.js b/src/picker/index.js
index 638ded36a..59456f353 100644
--- a/src/picker/index.js
+++ b/src/picker/index.js
@@ -2,7 +2,7 @@
import { createNamespace, isDef, isObject } from '../utils';
import { preventDefault } from '../utils/dom/event';
import { BORDER_UNSET_TOP_BOTTOM } from '../utils/constant';
-import { pickerProps } from './shared';
+import { pickerProps, DEFAULT_ITEM_HEIGHT } from './shared';
import { unitToPx } from '../utils/format/unit';
// Components
@@ -41,7 +41,7 @@ export default createComponent({
computed: {
itemPxHeight() {
- return unitToPx(this.itemHeight);
+ return this.itemHeight ? unitToPx(this.itemHeight) : DEFAULT_ITEM_HEIGHT;
},
dataType() {
diff --git a/src/picker/index.less b/src/picker/index.less
index d845596af..02b88da46 100644
--- a/src/picker/index.less
+++ b/src/picker/index.less
@@ -104,6 +104,7 @@
display: flex;
align-items: center;
justify-content: center;
+ height: @picker-option-height;
padding: 0 @padding-base;
color: @picker-option-text-color;
diff --git a/src/picker/shared.ts b/src/picker/shared.ts
index 7e8e619e5..9df9467d7 100644
--- a/src/picker/shared.ts
+++ b/src/picker/shared.ts
@@ -1,16 +1,19 @@
export type SharedPickerProps = {
title?: string;
loading?: boolean;
- itemHeight: number;
+ itemHeight?: number;
showToolbar?: boolean;
visibleItemCount: number | string;
cancelButtonText?: string;
confirmButtonText?: string;
};
+export const DEFAULT_ITEM_HEIGHT = 44;
+
export const pickerProps = {
title: String,
loading: Boolean,
+ itemHeight: [Number, String],
showToolbar: Boolean,
cancelButtonText: String,
confirmButtonText: String,
@@ -22,10 +25,6 @@ export const pickerProps = {
type: [Number, String],
default: 5,
},
- itemHeight: {
- type: [Number, String],
- default: 44,
- },
swipeDuration: {
type: [Number, String],
default: 1000,
diff --git a/src/picker/test/__snapshots__/demo.spec.js.snap b/src/picker/test/__snapshots__/demo.spec.js.snap
index ef31702d1..bdcb22726 100644
--- a/src/picker/test/__snapshots__/demo.spec.js.snap
+++ b/src/picker/test/__snapshots__/demo.spec.js.snap
@@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
- -
+
-
杭州
- -
+
-
宁波
- -
+
-
温州
- -
+
-
嘉兴
- -
+
-
湖州
@@ -43,19 +43,19 @@ exports[`renders demo correctly 1`] = `
- -
+
-
杭州
- -
+
-
宁波
- -
+
-
温州
- -
+
-
嘉兴
- -
+
-
湖州
@@ -75,32 +75,32 @@ exports[`renders demo correctly 1`] = `
- -
+
-
周一
- -
+
-
周二
- -
+
-
周三
- -
+
-
周四
- -
+
-
周五
@@ -120,30 +120,30 @@ exports[`renders demo correctly 1`] = `
@@ -163,13 +163,13 @@ exports[`renders demo correctly 1`] = `
@@ -189,29 +189,29 @@ exports[`renders demo correctly 1`] = `
- -
+
-
杭州
- -
+
-
宁波
- -
+
-
温州
- -
+
-
嘉兴
- -
+
-
湖州
@@ -231,29 +231,29 @@ exports[`renders demo correctly 1`] = `
- -
+
-
杭州
- -
+
-
宁波
- -
+
-
温州
- -
+
-
嘉兴
- -
+
-
湖州
diff --git a/src/picker/test/__snapshots__/index.spec.js.snap b/src/picker/test/__snapshots__/index.spec.js.snap
index fe9515293..65d2fb39e 100644
--- a/src/picker/test/__snapshots__/index.spec.js.snap
+++ b/src/picker/test/__snapshots__/index.spec.js.snap
@@ -76,7 +76,7 @@ exports[`not allow html 1`] = `
diff --git a/src/style/var.less b/src/style/var.less
index 028adfd49..cfe9ecaec 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -536,6 +536,7 @@
@picker-action-font-size: @font-size-md;
@picker-confirm-action-color: @text-link-color;
@picker-cancel-action-color: @gray-6;
+@picker-option-height: 44px;
@picker-option-font-size: @font-size-lg;
@picker-option-text-color: @black;
@picker-option-disabled-opacity: 0.3;