[new feature] Area add 'title' prop & optimzie Picker performance (#450)

packages/area/index.vue

@@ -3,11 +3,12 @@
     <picker
       ref="picker"
       showToolbar
+      :title="title"
       valueKey="name"
       :columns="areaColumns"
       @change="onChange"
       @confirm="$emit('confirm', $event)"
-      @cancel="$emit('cancel')"
+      @cancel="$emit('cancel', $event)"
     />
   </div>
 </template>
@@ -29,6 +30,7 @@ export default create({
 
   props: {
     value: {},
+    title: String,
     areaList: Object,
     // 省市县显示列数，3-省市县，2-省市，1-省
     columnsNum: {

packages/picker/PickerColumn.vue

@@ -1,14 +1,15 @@
 
 <template>
-  <div class="van-picker-column" :class="className" :style="columnStyle">
-    <div class="van-picker-column__frame van-hairline--top-bottom" :style="frameStyle" />
-    <ul
-      :style="wrapperStyle"
-      @touchstart="onTouchStart"
-      @touchmove.prevent="onTouchMove"
-      @touchend="onTouchEnd"
-      @touchcancel="onTouchEnd"
-    >
+  <div
+    class="van-picker-column"
+    :class="className"
+    :style="columnStyle"
+    @touchstart="onTouchStart"
+    @touchmove.prevent="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <ul :style="wrapperStyle">
       <li
         v-for="(option, index) in options" 
         v-text="getOptionText(option)"
@@ -34,14 +35,11 @@ export default create({
   props: {
     valueKey: String,
     className: String,
+    itemHeight: Number,
     options: {
       type: Array,
       default: () => []
     },
-    itemHeight: {
-      type: Number,
-      default: 44
-    },
     visibileColumnCount: {
       type: Number,
       default: 5
@@ -95,6 +93,10 @@ export default create({
       return this.options.length;
     },
 
+    baseOffset() {
+      return this.itemHeight * (this.visibileColumnCount - 1) / 2;
+    },
+
     columnStyle() {
       return {
         height: (this.itemHeight * this.visibileColumnCount) + 'px'
@@ -104,15 +106,8 @@ export default create({
     wrapperStyle() {
       return {
         transition: `${this.duration}ms`,
-        transform: `translate3d(0, ${this.offset}px, 0)`,
-        lineHeight: this.itemHeight + 'px',
-        padding: `${this.itemHeight * (this.visibileColumnCount - 1) / 2}px 0`
-      };
-    },
-
-    frameStyle() {
-      return {
-        height: this.itemHeight + 'px'
+        transform: `translate3d(0, ${this.offset + this.baseOffset}px, 0)`,
+        lineHeight: this.itemHeight + 'px'
       };
     },
 

packages/picker/index.vue

@@ -19,6 +19,7 @@
         :visibileColumnCount="visibileColumnCount"
         @change="onChange(index)"
       />
+      <div class="van-picker__frame van-hairline--top-bottom" :style="frameStyle" />
     </div>
   </div>
 </template>
@@ -41,7 +42,10 @@ export default create({
       type: String,
       default: 'text'
     },
-    itemHeight: Number,
+    itemHeight: {
+      type: Number,
+      default: 44
+    },
     showToolbar: Boolean,
     visibileColumnCount: Number,
     columns: {
@@ -67,6 +71,14 @@ export default create({
     }
   },
 
+  computed: {
+    frameStyle() {
+      return {
+        height: this.itemHeight + 'px'
+      };
+    }
+  },
+
   methods: {
     initColumns() {
       const columns = this.columns.map(deepClone);

packages/vant-css/src/picker.css

@@ -9,7 +9,6 @@
   &__toolbar {
     height: 40px;
     line-height: 40px;
-    overflow: hidden;
   }
 
   &__cancel,
@@ -39,18 +38,23 @@
     display: flex;
     position: relative;
   }
+  
+  &__frame {
+    top: 50%;
+    left: 0;
+    width: 100%;
+    z-index: 1;
+    position: absolute;
+    pointer-events: none;
+    transform: translateY(-50%);
+  }
 
   &-column {
     flex: 1;
     overflow: hidden;
     font-size: 18px;
-    position: relative;
     text-align: center;
 
-    ul {
-      box-sizing: border-box;
-    }
-
     li {
       padding: 0 10px;
       color: $gray-darker;
@@ -64,15 +68,5 @@
     li&--disabled {
       opacity: .3;
     }
-
-    &__frame {
-      top: 50%;
-      left: 0;
-      width: 100%;
-      z-index: 1;
-      position: absolute;
-      pointer-events: none;
-      transform: translateY(-50%);
-    }
   }
 }

packages/vant-css/src/submit-bar.css

@@ -13,7 +13,7 @@
     font-size: 12px;
     line-height: 18px;
     padding: 10px 10px;
-    background-color: #fff6e1;
+    background-color: #fff7cc;
   }
 
   &__bar {