feat: add panel-change event

mengxiong10 · Oct 5, 2018 · 5cdba7b · 5cdba7b
1 parent dfce741
commit 5cdba7b
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -156,6 +156,11 @@ export default {
 | confirm         | When click 'OK' button       | the currentValue       |
 | clear           | When click 'clear' button    |                        |
 | input-error     | When user type a invalid Date| the input text         |
+| panel-change    | When change the panel        | panel, oldPanel      |
+
+#### panel value
+`['NONE', 'DATE', 'YEAR', 'MONTH', 'TIME']`
+
 
 
 ### Slots

diff --git a/README.zh-CN.md b/README.zh-CN.md
@@ -154,6 +154,10 @@ export default {
 | input           | 日期改变的时候触发              | 选择的日期       |
 | confirm         | 点击确认按钮触发的事件           | 选择的日期       |
 | input-error     | 当用户输入的值无效时候触发       | 用户输入的字符串   |
+| panel-change    | 切换面板时触发                 | 当前面板，过去的面板|
+
+#### panel value
+`['NONE', 'DATE', 'YEAR', 'MONTH', 'TIME']`
 
 ## 许可证
 

diff --git a/src/calendar.vue b/src/calendar.vue
@@ -146,7 +146,7 @@ export default {
     const calendarMonth = now.getMonth()
     const firstYear = Math.floor(calendarYear / 10) * 10
     return {
-      panel: 'DATE',
+      panel: 'NONE',
       dates: [],
       calendarMonth,
       calendarYear,
@@ -198,12 +198,12 @@ export default {
       handler: 'init'
     },
     panel: {
-      immediate: true,
       handler: 'handelPanelChange'
     }
   },
   methods: {
-    handelPanelChange (panel) {
+    handelPanelChange (panel, oldPanel) {
+      this.$parent.$emit('panel-change', panel, oldPanel)
       if (panel === 'YEAR') {
         this.firstYear = Math.floor(this.calendarYear / 10) * 10
       } else if (panel === 'TIME') {
@@ -216,16 +216,20 @@ export default {
         })
       }
     },
-    init () {
-      const type = this.type
-      if (type === 'month') {
-        this.panel = 'MONTH'
-      } else if (type === 'year') {
-        this.panel = 'YEAR'
-      } else if (type === 'time') {
-        this.panel = 'TIME'
+    init (val) {
+      if (val) {
+        const type = this.type
+        if (type === 'month') {
+          this.showPanelMonth()
+        } else if (type === 'year') {
+          this.showPanelYear()
+        } else if (type === 'time') {
+          this.showPanelTime()
+        } else {
+          this.showPanelDate()
+        }
       } else {
-        this.panel = 'DATE'
+        this.showPanelNone()
       }
       this.updateNow(this.value)
     },
@@ -303,8 +307,8 @@ export default {
             time = new Date(this.startAt)
           }
         }
-        this.$emit('select-time', time)
-        this.panel = 'TIME'
+        this.selectTime(time)
+        this.showPanelTime()
         return
       }
       this.$emit('select-date', date)
@@ -380,6 +384,12 @@ export default {
     changePanelYears (flag) {
       this.firstYear = this.firstYear + flag * 10
     },
+    showPanelNone () {
+      this.panel = 'NONE'
+    },
+    showPanelTime () {
+      this.panel = 'TIME'
+    },
     showPanelDate () {
       this.panel = 'DATE'
     },