feat(DatetimePicker): support picker slots (#7645)

src/datetime-picker/README.md

@@ -292,6 +292,18 @@ Following props are supported when the type is time
 | confirm | Emitted when the confirm button is clicked | value: current value |
 | cancel | Emitted when the cancel button is clicked | - |
 
+### Slots
+
+| Name | Description | SlotProps |
+| --- | --- | --- |
+| default `v2.11.1` | Custom toolbar content | - |
+| title `v2.11.1` | Custom title | - |
+| confirm `v2.11.1` | Custom confirm button text | - |
+| cancel `v2.11.1` | Custom cancel button text | - |
+| option `v2.11.1` | Custom option content | _option: string \| object_ |
+| columns-top `v2.11.1` | Custom content above columns | - |
+| columns-bottom `v2.11.1` | Custom content below columns | - |
+
 ### Methods
 
 Use [ref](https://vuejs.org/v2/api/#ref) to get DatetimePicker instance and call instance methods.

src/datetime-picker/README.zh-CN.md

@@ -301,6 +301,18 @@ export default {
 | confirm | 点击完成按钮时触发的事件 | value: 当前选中的时间 |
 | cancel  | 点击取消按钮时触发的事件 | -                     |
 
+### Slots
+
+| 名称 | 说明 | 参数 |
+| --- | --- | --- |
+| default `v2.11.1` | 自定义整个顶部栏的内容 | - |
+| title `v2.11.1` | 自定义标题内容 | - |
+| confirm `v2.11.1` | 自定义确认按钮内容 | - |
+| cancel `v2.11.1` | 自定义取消按钮内容 | - |
+| option `v2.11.1` | 自定义选项内容 | _option: string \| object_ |
+| columns-top `v2.11.1` | 自定义选项上方内容 | - |
+| columns-bottom `v2.11.1` | 自定义选项下方内容 | - |
+
 ### 方法
 
 通过 ref 可以获取到 DatetimePicker 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。

src/datetime-picker/index.js

@@ -24,6 +24,7 @@ export default createComponent({
       <Component
         ref="root"
         class={bem()}
+        scopedSlots={this.$scopedSlots}
         {...{
           props: this.$props,
           on: this.$listeners,

src/datetime-picker/shared.js

@@ -95,6 +95,7 @@ export const TimePickerMixin = {
         ref="picker"
         columns={this.columns}
         readonly={this.readonly}
+        scopedSlots={this.$scopedSlots}
         onChange={this.onChange}
         onConfirm={this.onConfirm}
         onCancel={this.onCancel}

src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap

@@ -1,5 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should render title slot correctly 1`] = `<div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>`;
+
 exports[`time type 1`] = `
 <div class="van-picker van-datetime-picker">
   <div class="van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>

src/datetime-picker/test/datetime-picker.spec.js

@@ -35,3 +35,16 @@ test('getPicker method', () => {
   const wrapper = mount(DatetimePicker);
   expect(wrapper.vm.getPicker()).toBeTruthy();
 });
+
+test('should render title slot correctly', () => {
+  const wrapper = mount(DatetimePicker, {
+    propsData: {
+      showToolbar: true,
+    },
+    scopedSlots: {
+      title: () => 'Custom title',
+    },
+  });
+
+  expect(wrapper.find('.van-picker__toolbar')).toMatchSnapshot();
+});