[new feature] Picker: add title slot (#2811)

packages/picker/en-US.md

@@ -147,6 +147,11 @@ Picker events will pass different parameters according to the columns are single
 | cancel | Triggered when click cancel button | Single column：current value，current index<br>Multiple columns：current values，current indexes |
 | change | Triggered when current option changed | Single column：Picker instance, current value，current index<br>Multiple columns：Picker instance, current values，column index |
 
+### Slot
+
+| name | Description |
+|------|------|
+| title | Custom title |
 
 ### Data struct of columns
 

packages/picker/index.js

@@ -54,7 +54,12 @@ export default sfc({
 
     onChange(columnIndex) {
       if (this.simple) {
-        this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
+        this.$emit(
+          'change',
+          this,
+          this.getColumnValue(0),
+          this.getColumnIndex(0)
+        );
       } else {
         this.$emit('change', this, this.getValues(), columnIndex);
       }
@@ -96,7 +101,10 @@ export default sfc({
     // set options of column by index
     setColumnValues(index, options) {
       const column = this.children[index];
-      if (column && JSON.stringify(column.options) !== JSON.stringify(options)) {
+      if (
+        column &&
+        JSON.stringify(column.options) !== JSON.stringify(options)
+      ) {
         column.options = options;
         column.setIndex(0);
       }
@@ -153,7 +161,10 @@ export default sfc({
           <div class={bem('cancel')} onClick={this.onCancel}>
             {this.cancelButtonText || t('cancel')}
           </div>,
-          this.title && <div class={['van-ellipsis', bem('title')]}>{this.title}</div>,
+          this.slots('title') ||
+            (this.title && (
+              <div class={['van-ellipsis', bem('title')]}>{this.title}</div>
+            )),
           <div class={bem('confirm')} onClick={this.onConfirm}>
             {this.confirmButtonText || t('confirm')}
           </div>
@@ -169,11 +180,7 @@ export default sfc({
             <Loading />
           </div>
         )}
-        <div
+        <div class={bem('columns')} style={columnsStyle} onTouchmove={prevent}>
-          class={bem('columns')}
-          style={columnsStyle}
-          onTouchmove={prevent}
-        >
           {columns.map((item, index) => (
             <PickerColumn
               valueKey={this.valueKey}
@@ -187,7 +194,10 @@ export default sfc({
               }}
             />
           ))}
-          <div class={['van-hairline--top-bottom', bem('frame')]} style={frameStyle} />
+          <div
+            class={['van-hairline--top-bottom', bem('frame')]}
+            style={frameStyle}
+          />
         </div>
       </div>
     );

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

@@ -27,3 +27,14 @@ exports[`column watch default index 2`] = `
   </ul>
 </div>
 `;
+
+exports[`render title slot 1`] = `
+<div class="van-picker">
+  <div class="van-hairline--top-bottom van-picker__toolbar">
+    <div class="van-picker__cancel">取消</div>Custom title<div class="van-picker__confirm">确认</div>
+  </div>
+  <div class="van-picker__columns" style="height: 220px;">
+    <div class="van-hairline--top-bottom van-picker__frame" style="height: 44px;"></div>
+  </div>
+</div>
+`;

packages/picker/test/index.spec.js

@@ -117,3 +117,18 @@ test('column watch default index', async () => {
   wrapper.vm.defaultIndex = 2;
   expect(wrapper).toMatchSnapshot();
 });
+
+test('render title slot', () => {
+  const wrapper = mount({
+    template: `
+      <picker show-toolbar>
+        <template v-slot:title>Custom title</template>
+      </picker>
+    `,
+    components: {
+      Picker
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});

packages/picker/zh-CN.md

@@ -150,6 +150,11 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数
 | cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
 | change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
 
+### Slot
+
+| 名称 | 说明 |
+|------|------|
+| title | 自定义标题内容 |
 
 ### Columns 数据结构