picker 增加 title 显示 (#30)

* picker 增加 title 显示

packages/picker/src/picker-column.vue

@@ -172,6 +172,7 @@ export default {
             startTop: event.pageY,
             startTranslateTop: translateUtil.getElementTranslate(el).top
           };
+
           pickerItems = el.querySelectorAll('.van-picker-item'); // eslint-disable-line
         },
 

packages/picker/src/picker.vue

@@ -4,6 +4,7 @@
       <slot>
         <a href="javascript:void(0)" class="van-picker__cancel" @click="handlePickerCancel">取消</a>
         <a href="javascript:void(0)" class="van-picker__confirm" @click="handlePickerConfirm">完成</a>
+        <p v-if="title" class="van-picker__title">{{ title }}</p>
       </slot>
     </div>
     <div class="van-picker__columns" :class="['van-picker__columns--' + columns.length]">
@@ -65,6 +66,10 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * 顶部toolbar 显示的title
+     */
+    title: String,
     valueKey: String
   },
 

packages/vant-css/src/picker.css

@@ -27,6 +27,17 @@
       float: right;
     }
 
+    @e title {
+      height: 40px;
+      padding: 0 10px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      word-wrap: normal;
+      word-break: break-all;
+      text-align: center;
+    }
+
     @e columns {
       position: relative;
       overflow: hidden;