diff --git a/src/datetime-picker/README.md b/src/datetime-picker/README.md index 5c3d0adc3..570d6e632 100644 --- a/src/datetime-picker/README.md +++ b/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. diff --git a/src/datetime-picker/README.zh-CN.md b/src/datetime-picker/README.zh-CN.md index dd0a3dfc6..9c7e91462 100644 --- a/src/datetime-picker/README.zh-CN.md +++ b/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)。 diff --git a/src/datetime-picker/index.js b/src/datetime-picker/index.js index 50a0c3080..5785c0e85 100644 --- a/src/datetime-picker/index.js +++ b/src/datetime-picker/index.js @@ -24,6 +24,7 @@ export default createComponent({ Custom title`; + exports[`time type 1`] = `
diff --git a/src/datetime-picker/test/datetime-picker.spec.js b/src/datetime-picker/test/datetime-picker.spec.js index a268c45a2..c729dcfa3 100644 --- a/src/datetime-picker/test/datetime-picker.spec.js +++ b/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(); +});