style(Picker): add @picker-option-height less var (#6571)

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

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() {

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;
 

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,

src/picker/test/__snapshots__/demo.spec.js.snap

@@ -11,19 +11,19 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">杭州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">宁波</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">温州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">嘉兴</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">湖州</div>
             </li>
           </ul>
@@ -43,19 +43,19 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">杭州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">宁波</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">温州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">嘉兴</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">湖州</div>
             </li>
           </ul>
@@ -75,32 +75,32 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">周一</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">周二</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">周三</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">周四</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">周五</div>
             </li>
           </ul>
         </div>
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">上午</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">下午</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">晚上</div>
             </li>
           </ul>
@@ -120,30 +120,30 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">浙江</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">福建</div>
             </li>
           </ul>
         </div>
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">杭州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">温州</div>
             </li>
           </ul>
         </div>
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">西湖区</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">余杭区</div>
             </li>
           </ul>
@@ -163,13 +163,13 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 44px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled" style="height: 44px;">
+            <li role="button" tabindex="-1" class="van-picker-column__item van-picker-column__item--disabled">
               <div class="van-ellipsis">杭州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">宁波</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">温州</div>
             </li>
           </ul>
@@ -189,29 +189,29 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">浙江</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">福建</div>
             </li>
           </ul>
         </div>
         <div class="van-picker-column column2">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">杭州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">宁波</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">温州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">嘉兴</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">湖州</div>
             </li>
           </ul>
@@ -231,29 +231,29 @@ exports[`renders demo correctly 1`] = `
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column column1">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">浙江</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">福建</div>
             </li>
           </ul>
         </div>
         <div class="van-picker-column column2">
           <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 0px, 0); transition-duration: 0ms; transition-property: none;">
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">杭州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">宁波</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
               <div class="van-ellipsis">温州</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">嘉兴</div>
             </li>
-            <li role="button" tabindex="0" class="van-picker-column__item" style="height: 44px;">
+            <li role="button" tabindex="0" class="van-picker-column__item">
               <div class="van-ellipsis">湖州</div>
             </li>
           </ul>

src/picker/test/__snapshots__/index.spec.js.snap

@@ -76,7 +76,7 @@ exports[`not allow html 1`] = `
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
       <ul class="van-picker-column__wrapper" style="transform: translate3d(0, 88px, 0); transition-duration: 0ms; transition-property: none;">
-        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected" style="height: 44px;">
+        <li role="button" tabindex="0" class="van-picker-column__item van-picker-column__item--selected">
           <div class="van-ellipsis">&lt;div&gt;option&lt;/div&gt;</div>
         </li>
       </ul>