diff --git a/packages/varlet-vue2-ui/src/time-picker/TimePicker.vue b/packages/varlet-vue2-ui/src/time-picker/TimePicker.vue index 4b8132a..2753a85 100644 --- a/packages/varlet-vue2-ui/src/time-picker/TimePicker.vue +++ b/packages/varlet-vue2-ui/src/time-picker/TimePicker.vue @@ -130,10 +130,10 @@ export default defineComponent({ }, methods: { update(newTime) { - const { onInput } = this.getListeners() + const { onInput, onChange } = this.getListeners() onInput?.(newTime) - this.onChange?.(newTime) + onChange?.(newTime) }, rad2deg(rad) { return rad * 57.29577951308232 diff --git a/packages/varlet-vue2-ui/src/time-picker/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-vue2-ui/src/time-picker/__tests__/__snapshots__/index.spec.js.snap index 3b9cdad..c02494c 100644 --- a/packages/varlet-vue2-ui/src/time-picker/__tests__/__snapshots__/index.spec.js.snap +++ b/packages/varlet-vue2-ui/src/time-picker/__tests__/__snapshots__/index.spec.js.snap @@ -749,14 +749,7 @@ exports[`test timePicker style and format 2`] = ` -
-
- AM -
-
- PM -
-
+
@@ -799,7 +792,44 @@ exports[`test timePicker style and format 2`] = `
11
- +
+
+ 00 +
+
+ 13 +
+
+ 14 +
+
+ 15 +
+
+ 16 +
+
+ 17 +
+
+ 18 +
+
+ 19 +
+
+ 20 +
+
+ 21 +
+
+ 22 +
+
+ 23 +
+
diff --git a/packages/varlet-vue2-ui/src/time-picker/__tests__/index.spec.js b/packages/varlet-vue2-ui/src/time-picker/__tests__/index.spec.js index e705596..dcecf9e 100644 --- a/packages/varlet-vue2-ui/src/time-picker/__tests__/index.spec.js +++ b/packages/varlet-vue2-ui/src/time-picker/__tests__/index.spec.js @@ -43,7 +43,7 @@ test('test timePicker style and format', async () => { expect(wrapper.html()).toMatchSnapshot() - await wrapper.setData({ type: '24hr' }) + await wrapper.setData({ format: '24hr' }) expect(wrapper.html()).toMatchSnapshot() }) @@ -73,7 +73,8 @@ test('test max and min', async () => { await wrapper.setData({ max: '11:11', min: '11:11' }) await delay(200) - expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11') + const text = wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '') + expect(text).toBe('11:11') const el = wrapper.find('.var-time-picker-clock__container') await trigger(el, 'touchstart', 50, 30) @@ -81,12 +82,12 @@ test('test max and min', async () => { await trigger(el, 'touchend', 60, 25) await delay(200) - expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11') + expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11') await wrapper.find('.var-time-picker-title__btn').trigger('click') await wrapper.find('.var-time-picker-clock__item').trigger('click') - expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11') + expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11') }) test('test useSeconds prop', () => { @@ -123,12 +124,12 @@ test('test readonly prop', async () => { await trigger(el, 'touchend', 30, 25) await delay(200) - expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11') + expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11') await wrapper.find('.var-time-picker-title__btn').trigger('click') await wrapper.find('.var-time-picker-clock__item').trigger('click') - expect(wrapper.find('.var-time-picker-title__time').text()).toBe('11:11') + expect(wrapper.find('.var-time-picker-title__time').text().replace(/\s+/g, '')).toBe('11:11') }) test('test v-model and onChange event', async () => { @@ -160,23 +161,27 @@ test('test v-model and onChange event', async () => { await delay(200) expect(wrapper.find('.var-time-picker-title__time').text()).not.toBe('11:11:11') - expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[1].text()).toBe('11') - expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].text()).toBe('11') + expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(1).text()).toBe('11') + expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).text()).toBe('11') - await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[1].trigger('click') + await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(1).trigger('click') await delay(200) await trigger(el, 'touchstart', 40, 30) await trigger(el, 'touchmove', 20, 25) await trigger(el, 'touchend', 30, 25) - expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[1].text()).not.toBe('11') - expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].text()).toBe('11') + expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(1).text()).not.toBe( + '11' + ) + expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).text()).toBe('11') - await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].trigger('click') + await wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).trigger('click') await delay(200) await trigger(el, 'touchstart', 40, 30) await trigger(el, 'touchmove', 20, 25) await trigger(el, 'touchend', 30, 25) - expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn')[2].text()).not.toBe('11') + expect(wrapper.find('.var-time-picker-title__time').findAll('.var-time-picker-title__btn').at(2).text()).not.toBe( + '11' + ) expect(wrapper.vm.time).not.toBe('11:11:11') expect(change).toHaveBeenCalled() }) @@ -198,11 +203,11 @@ test('test switch timePicker ampm', async () => { }) await delay(0) - await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn')[1].trigger('click') + await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn').at(1).trigger('click') expect(wrapper.vm.time).toBe('17:10:22') await wrapper.setData({ min: '6:00:00' }) - await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn')[0].trigger('click') + await wrapper.find('.var-time-picker-title__ampm').findAll('.var-time-picker-title__btn').at(0).trigger('click') expect(wrapper.vm.time).toBe('06:10:22') }) diff --git a/packages/varlet-vue2-ui/src/time-picker/props.ts b/packages/varlet-vue2-ui/src/time-picker/props.ts index 8d38cd2..3450cce 100644 --- a/packages/varlet-vue2-ui/src/time-picker/props.ts +++ b/packages/varlet-vue2-ui/src/time-picker/props.ts @@ -3,15 +3,15 @@ import type { PropType } from 'vue' export type Format = 'ampm' | '24hr' export type AmPm = 'am' | 'pm' export type Time = { - hour: string; - minute: string; - second?: string; + hour: string + minute: string + second?: string } export type AllowedTime = { - hours?: (hour: number) => boolean; - minutes?: (minute: number) => boolean; - seconds?: (second: number) => boolean; + hours?: (hour: number) => boolean + minutes?: (minute: number) => boolean + seconds?: (second: number) => boolean } export const hoursAmpm = ['12', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11'] @@ -58,7 +58,4 @@ export const props = { type: Boolean, default: false, }, - onChange: { - type: Function as PropType<(value: string) => void>, - }, }