feat: add event panel-change

README.md

@@ -290,6 +290,7 @@ Set fixed time list to select;
 | blur            | When input blur                                                                    |                                                                                                                          |
 | pick            | when select date [#429](https://github.com/mengxiong10/vue2-datepicker/issues/429) | date                                                                                                                     |
 | calendar-change | when change the calendar                                                           | date, oldDate, type('year'\|'month'\|'last-year'\|'next-year'\|'last-month'\|'next-month'\|'last-decade'\|'next-decade') |
+| panel-change    | when the calendar panel changes                                                    | type('year'\|'month'\|'date'), oldType                                                                                   |
 
 ### Slots
 

README.zh-CN.md

@@ -287,6 +287,7 @@ data() {
 | blur            | 当输入框失焦                                                                   |                                                                                                                          |
 | pick            | 当点击日期时 [#429](https://github.com/mengxiong10/vue2-datepicker/issues/429) | date                                                                                                                     |
 | calendar-change | 当改变年月时                                                                   | date, oldDate, type('year'\|'month'\|'last-year'\|'next-year'\|'last-month'\|'next-month'\|'last-decade'\|'next-decade') |
+| panel-change    | 当日历面板改变时                                                               | type('year'\|'month'\|'date'), oldType                                                                                   |
 
 ### Slots
 

__test__/date-picker.test.js

@@ -439,4 +439,15 @@ describe('DatePicker', () => {
     expect(wrapper.emitted().input[1]).toBe(undefined);
     expect(wrapper.emitted()['input-error'][0][0]).toBe('2020-05-01');
   });
+
+  it('panel-change event should be emitd', async () => {
+    wrapper = mount(DatePicker, {
+      propsData: {
+        open: true,
+      },
+    });
+    const yearBtn = wrapper.find('.mx-btn-current-year');
+    await yearBtn.trigger('click');
+    expect(wrapper.emitted()['panel-change'][0]).toEqual(['year', 'date']);
+  });
 });

src/calendar/calendar-panel.js

@@ -125,7 +125,9 @@ export default {
       this.dispatchDatePicker('calendar-change', calendar, oldCalendar, type);
     },
     handelPanelChange(panel) {
+      const oldPanel = this.panel;
       this.panel = panel;
+      this.dispatchDatePicker('panel-change', panel, oldPanel);
     },
     handleSelectYear(year) {
       if (this.type === 'year') {