picker 增加 title 显示 (#30)

* picker 增加 title 显示

docs/examples-docs/picker.md

@@ -8,6 +8,7 @@ const citys = {
 export default {
   data() {
     return {
+      title: '地区选择',
       pickerColumns: [
         {
           values: Object.keys(citys),
@@ -113,7 +114,14 @@ export default {
 
 :::demo 带toolbar的Picker
 ```html
-<van-picker :columns="pickerColumns" show-toolbar @change="handlePickerChange" @cancel="handlePickerCancel" @confirm="handlePickerConfirm"></van-picker>
+<van-picker
+  :title="title"
+  :columns="pickerColumns"
+  show-toolbar
+  @change="handlePickerChange"
+  @cancel="handlePickerCancel"
+  @confirm="handlePickerConfirm"
+></van-picker>
 
 <script>
 const citys = {
@@ -125,6 +133,7 @@ const citys = {
 export default {
   data() {
     return {
+      title: '地区选择',
       pickerColumns: [
         {
           values: Object.keys(citys),
@@ -162,6 +171,7 @@ export default {
 | itemHeight | 选中元素区高度 | `number`  | `44` |   |
 | columns | 对象数组，配置每一列显示的数据 | `Array`  |  |   |
 | showToolbar | 是否在组件顶部显示一个toolbar | `Boolean`  | `true` |   |
+| title | 在toolbar上显示的标题文字 | `String`  |  |   |
 
 ### columns
 

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;

test/unit/specs/picker.spec.js

@@ -1,6 +1,7 @@
 import Picker from 'packages/picker';
 import PickerColumn from 'packages/picker/src/picker-column';
 import { mount } from 'avoriaz';
+import Wrapper from 'avoriaz/dist/Wrapper';
 
 const itemHeight = 44;
 
@@ -177,7 +178,7 @@ describe('PickerColumn', () => {
         value: 1
       }
     });
-    
+
     expect(wrapper.hasClass('van-picker-column')).to.be.true;
     expect(wrapper.vm.values.length).to.equal(5);
 
@@ -207,12 +208,62 @@ describe('PickerColumn', () => {
   it('create a picker test translate', () => {
     wrapper = mount(PickerColumn, {
       propsData: {
-        values: [1, 2, 3, 4, 5]
+        values: [1, 2, 3, 4, 5],
+        value: 1
       }
     });
 
     expect(wrapper.vm.values.length).to.equal(5);
-    expect(wrapper.vm.value2Translate(2)).to.equal((1- Math.floor(5 / 2)) * (-itemHeight));
+    expect(wrapper.vm.value2Translate(2)).to.equal((1 - Math.floor(5 / 2)) * (-itemHeight));
     expect(wrapper.vm.translate2Value(0)).to.equal(3);
   });
+
+  it('test draggable', done => {
+    wrapper = mount(PickerColumn, {
+      propsData: {
+        values: [1, 2, 3, 4, 5]
+      },
+      attachToDocument: true
+    });
+
+    expect(wrapper.vm.values.length).to.equal(5);
+
+    setTimeout(() => {
+      const nColumn = wrapper.find('.van-picker-column-wrapper')[0];
+
+      const eventMouseObject = new window.Event('mousedown');
+      eventMouseObject.pageY = 0;
+      nColumn.element.dispatchEvent(eventMouseObject);
+
+      const eventTouchObject = new window.Event('touchstart');
+      eventTouchObject.changedTouches = [{ pageY: 0 }];
+      nColumn.element.dispatchEvent(eventTouchObject);
+    }, 500);
+
+    setTimeout(() => {
+      const nColumn = wrapper.find('.van-picker-column-wrapper')[0];
+
+      const eventMouseMoveObject = new window.Event('mousemove');
+      eventMouseMoveObject.pageY = 40;
+      document.dispatchEvent(eventMouseMoveObject);
+
+      const eventObject = new window.Event('touchmove');
+      eventObject.changedTouches = [{ pageY: 40 }];
+      nColumn.element.dispatchEvent(eventObject);
+
+      // 结束滚动
+      const eventMouseUpObject = new window.Event('mouseup');
+      document.dispatchEvent(eventMouseUpObject);
+      const eventEndObject = new window.Event('touchend');
+      eventEndObject.changedTouches = [{}];
+      nColumn.element.dispatchEvent(eventEndObject);
+    }, 1000);
+
+    setTimeout(() => {
+      const nItem = wrapper.find('.van-picker-column__item');
+      expect(nItem[1].hasClass('van-picker-column__item--selected')).to.be.true;
+
+      done();
+    }, 1200);
+  });
 });