Merge branch '2.x' into dev

src/datetime-picker/DatePicker.js

@@ -36,7 +36,7 @@ export default createComponent({
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const formatValue = (value) => {
       if (!isDate(value)) {
         value = props.minDate;
@@ -299,6 +299,7 @@ export default createComponent({
 
     return () => (
       <Picker
+        v-slots={slots}
         ref={picker}
         columns={columns.value}
         readonly={props.readonly}

src/datetime-picker/README.md

@@ -293,6 +293,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://v3.vuejs.org/guide/component-template-refs.html) to get DatetimePicker instance and call instance methods.

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

@@ -302,6 +302,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/TimePicker.js

@@ -36,7 +36,7 @@ export default createComponent({
 
   emits: ['confirm', 'cancel', 'change', 'update:modelValue'],
 
-  setup(props, { emit }) {
+  setup(props, { emit, slots }) {
     const formatValue = (value) => {
       const { minHour, maxHour, maxMinute, minMinute } = props;
 
@@ -171,6 +171,7 @@ export default createComponent({
 
     return () => (
       <Picker
+        v-slots={slots}
         ref={picker}
         columns={columns.value}
         readonly={props.readonly}

src/datetime-picker/index.js

@@ -15,7 +15,7 @@ export default createComponent({
     ...DatePicker.props,
   },
 
-  setup(props, { attrs }) {
+  setup(props, { attrs, slots }) {
     const root = ref();
 
     useExpose({
@@ -32,6 +32,7 @@ export default createComponent({
 
       return (
         <Component
+          v-slots={slots}
           ref={root}
           class={bem()}
           {...{ ...inheritProps, ...attrs }}

src/datetime-picker/test/__snapshots__/datetime-picker.legacy.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.legacy.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();
+});