From eb533f50b93dc4324342ab2669a35a7272ebc799 Mon Sep 17 00:00:00 2001 From: mengxiong10 <15623530290@163.com> Date: Thu, 16 Dec 2021 10:22:49 +0800 Subject: [PATCH] fix: the second argument(type) to change event (#1) --- README.md | 24 ++++++++++++------------ README.zh-CN.md | 28 ++++++++++++++-------------- __tests__/DatePicker.test.ts | 14 +++++++------- lib/Picker.tsx | 10 +++++----- 4 files changed, 38 insertions(+), 38 deletions(-) diff --git a/README.md b/README.md index c38d7f8..66b882b 100644 --- a/README.md +++ b/README.md @@ -281,18 +281,18 @@ Set fixed time list to select; ### Events -| Name | Description | Callback Arguments | -| --------------- | -------------------------------------------------------------------------------------- | -------------------------------------- | -| input | When the value change(v-model event) | date | -| change | When the value change(same as input) | date | -| open | When panel opening | event | -| close | When panel closing | | -| confirm | When click 'confirm' button | date | -| clear | When click 'clear' button | | -| input-error | When user type a invalid Date | the input text | -| pick | when select date [#429](https://github.com/mengxiong10/vue-datepicker-next/issues/429) | date | -| calendar-change | when change the calendar | date, oldDate | -| panel-change | when the calendar panel changes | type('year'\|'month'\|'date'), oldType | +| Name | Description | Callback Arguments | +| --------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------ | +| update:value | When the value change(v-model:value event) | date | +| change | When the value change(same as input) | date, type('date'\|'hour'\|'minute'\|'second'\|'ampm') | +| open | When panel opening | event | +| close | When panel closing | | +| confirm | When click 'confirm' button | date | +| clear | When click 'clear' button | | +| input-error | When user type a invalid Date | the input text | +| pick | when select date [#429](https://github.com/mengxiong10/vue-datepicker-next/issues/429) | date | +| calendar-change | when change the calendar | date, oldDate | +| panel-change | when the calendar panel changes | type('year'\|'month'\|'date'), oldType | ### Slots diff --git a/README.zh-CN.md b/README.zh-CN.md index 2d8d89d..5377059 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -270,20 +270,20 @@ data() { ### 事件 -| 名称 | 描述 | 回调函数的参数 | -| --------------- | ---------------------------------------------------------------------------------- | -------------------------------------- | -| input | 当选择日期的事件触发 | date | -| change | 当选择日期的事件触发 | date | -| open | 当弹出层打开时候 | event | -| close | 当弹出层关闭时候 | | -| confirm | 当点击确认按钮 | date | -| clear | 当点击清除按钮 | | -| input-error | 当输入一个无效的时间 | input text | -| focus | 当输入框有焦点 | | -| blur | 当输入框失焦 | | -| pick | 当点击日期时 [#429](https://github.com/mengxiong10/vue-datepicker-next/issues/429) | date | -| calendar-change | 当改变年月时 | date, oldDate | -| panel-change | 当日历面板改变时 | type('year'\|'month'\|'date'), oldType | +| 名称 | 描述 | 回调函数的参数 | +| --------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------ | +| update:value | 当选择日期的事件触发 | date | +| change | 当选择日期的事件触发 | date, type('date'\|'hour'\|'minute'\|'second'\|'ampm') | +| open | 当弹出层打开时候 | event | +| close | 当弹出层关闭时候 | | +| confirm | 当点击确认按钮 | date | +| clear | 当点击清除按钮 | | +| input-error | 当输入一个无效的时间 | input text | +| focus | 当输入框有焦点 | | +| blur | 当输入框失焦 | | +| pick | 当点击日期时 [#429](https://github.com/mengxiong10/vue-datepicker-next/issues/429) | date | +| calendar-change | 当改变年月时 | date, oldDate | +| panel-change | 当日历面板改变时 | type('year'\|'month'\|'date'), oldType | ### Slots diff --git a/__tests__/DatePicker.test.ts b/__tests__/DatePicker.test.ts index faecb7a..27b5f7c 100644 --- a/__tests__/DatePicker.test.ts +++ b/__tests__/DatePicker.test.ts @@ -172,7 +172,7 @@ describe('DatePicker', () => { value: value, format: 'YYYY/MM/DD', open: true, - onChange: mockFn, + ['onUpdate:value']: mockFn, }, }); const cell = wrapper.find('[title="2019-10-01"]'); @@ -204,7 +204,7 @@ describe('DatePicker', () => { open: true, valueType: 'YYYY/MM/DD', appendToBody: false, - onChange: mockFn, + ['onUpdate:value']: mockFn, shortcuts: [ { text: 'Today', @@ -256,7 +256,7 @@ describe('DatePicker', () => { confirm: true, confirmText: 'test', appendToBody: false, - onChange: mockFn, + ['onUpdate:value']: mockFn, }, }); await wrapper.find('input').trigger('focus'); @@ -295,7 +295,7 @@ describe('DatePicker', () => { range: false, value: new Date(2019, 10, 9), onClear: mockClearFn, - onChange: mockChangeFn, + ['onUpdate:value']: mockChangeFn, }, }); wrapper.find('.mx-icon-clear').trigger('click'); @@ -345,7 +345,7 @@ describe('DatePicker', () => { separator, range: true, valueType: 'format', - onChange: mockFn, + ['onUpdate:value']: mockFn, }, }); const input = wrapper.find('input'); @@ -369,7 +369,7 @@ describe('DatePicker', () => { open: true, appendToBody: false, value, - onChange: mockFn, + ['onUpdate:value']: mockFn, }, }); wrapper.find('.mx-date-row .active').trigger('click'); @@ -388,7 +388,7 @@ describe('DatePicker', () => { disabledDate: (date) => { return date < someday; }, - onChange: mockFn, + ['onUpdate:value']: mockFn, onInputError: inputErrorFn, }, }); diff --git a/lib/Picker.tsx b/lib/Picker.tsx index 8d85d4f..61d497e 100644 --- a/lib/Picker.tsx +++ b/lib/Picker.tsx @@ -29,7 +29,7 @@ export interface PickerBaseProps { onClose?: () => void; onOpen?: () => void; onConfirm?: (v: any) => void; - onChange?: (v: any) => void; + onChange?: (v: any, type?: string) => void; ['onUpdate:open']?: (open: boolean) => void; ['onUpdate:value']?: (v: any) => void; } @@ -39,7 +39,7 @@ export type PickerProps = PickerBaseProps & PickerInputBaseProps; export interface SlotProps { value: any; ['onUpdate:value']: (value: any, type: string) => void; - emit: (value: any, close?: boolean) => void; + emit: (value: any, type?: string, close?: boolean) => void; } function Picker(originalProps: PickerProps, { slots }: SetupContext) { @@ -136,10 +136,10 @@ function Picker(originalProps: PickerProps, { slots }: SetupContext) { return value2date(value); }); - const emitValue = (date: Date | Date[] | null | null[], close = true) => { + const emitValue = (date: Date | Date[] | null | null[], type?: string, close = true) => { const value = Array.isArray(date) ? date.map(date2value) : date2value(date); props['onUpdate:value']?.(value); - props.onChange?.(value); + props.onChange?.(value, type); if (close) { closePopup(); } @@ -159,7 +159,7 @@ function Picker(originalProps: PickerProps, { slots }: SetupContext) { currentValue.value = val; } else { // type === 'datetime', click the time should close popup - emitValue(val, !props.multiple && (type === props.type || type === 'time')); + emitValue(val, type, !props.multiple && (type === props.type || type === 'time')); } };