ソースを参照

fix:修复日历组件点击确定触发close事件issues175

richard1015 6 年 前
コミット
39e1fb259f

+ 11 - 2
src/packages/calendar/calendar.vue

@@ -1,6 +1,6 @@
 <template>
 <template>
     <transition :name="animation">
     <transition :name="animation">
-        <div class="nut-calendar" v-show="isVisible">
+        <div class="nut-calendar" v-show="childIsVisible">
             <div class="nut-calendar-control">
             <div class="nut-calendar-control">
                 <span class="nut-calendar-confirm-btn" @click="confirm" v-if="(type == 'range' && currDate && currDate.length == 2) || type != 'range'">{{nutTranslate('lang.okBtnTxt')}}</span>
                 <span class="nut-calendar-confirm-btn" @click="confirm" v-if="(type == 'range' && currDate && currDate.length == 2) || type != 'range'">{{nutTranslate('lang.okBtnTxt')}}</span>
                 <span class="nut-calendar-cancel-btn"  @click="closeActionSheet">{{nutTranslate('lang.cancelBtnTxt')}}</span>
                 <span class="nut-calendar-cancel-btn"  @click="closeActionSheet">{{nutTranslate('lang.cancelBtnTxt')}}</span>
@@ -76,9 +76,15 @@ export default {
             default: Utils.getDay(365)
             default: Utils.getDay(365)
         },
         },
     },
     },
+    watch:{
+        isVisible(newValue,oldValue){
+            this.childIsVisible = newValue;
+        }
+    },
     data() {
     data() {
         const week = this.nutTranslate('lang.calendar.week');
         const week = this.nutTranslate('lang.calendar.week');
         return {
         return {
+            childIsVisible: false,
             currDate: null,
             currDate: null,
             week: week.split(','),
             week: week.split(','),
             unLoadPrev: false,
             unLoadPrev: false,
@@ -245,7 +251,8 @@ export default {
         confirm() {
         confirm() {
             if ((this.isRange && this.chooseData.length == 2) || !this.isRange) {
             if ((this.isRange && this.chooseData.length == 2) || !this.isRange) {
                 this.$emit('choose', this.chooseData);  
                 this.$emit('choose', this.chooseData);  
-                this.$emit('close');
+                this.childIsVisible = false;
+                this.$emit('update:is-visible', false);
             }
             }
         },
         },
 
 
@@ -259,6 +266,8 @@ export default {
         },
         },
 
 
         closeActionSheet() {
         closeActionSheet() {
+            this.childIsVisible = false;
+            this.$emit('update:is-visible', false);
             this.$emit('close');
             this.$emit('close');
             this.resetRender();
             this.resetRender();
         },
         },

+ 13 - 10
src/packages/calendar/demo.vue

@@ -35,36 +35,36 @@
             </div>
             </div>
         </nut-cell>
         </nut-cell>
         <!-- demo-->
         <!-- demo-->
-        <nut-calendar :is-visible="isVisible"
+        <nut-calendar :is-visible.sync="isVisible"
             :default-value="date"
             :default-value="date"
-            @close="switchPicker('isVisible')"
+            @close="switchPickerClose('isVisible')"
             @choose="setChooseValue"
             @choose="setChooseValue"
             :start-date="`2018-10-11`"
             :start-date="`2018-10-11`"
             :end-date="`2020-11-11`"
             :end-date="`2020-11-11`"
         >
         >
         </nut-calendar>
         </nut-calendar>
-        <nut-calendar :is-visible="isVisible2"
+        <nut-calendar :is-visible.sync="isVisible2"
             :default-value="date2"
             :default-value="date2"
             :is-auto-back-fill="true"
             :is-auto-back-fill="true"
-            @close="switchPicker('isVisible2')"
+            @close="switchPickerClose('isVisible2')"
             @choose="setChooseValue2"
             @choose="setChooseValue2"
         >
         >
         </nut-calendar>
         </nut-calendar>
-        <nut-calendar :is-visible="isVisible1"
+        <nut-calendar :is-visible.sync="isVisible1"
             :default-value="date1"
             :default-value="date1"
             type="range"
             type="range"
             :start-date="null"
             :start-date="null"
             :end-date="null"
             :end-date="null"
-            @close="switchPicker('isVisible1')"
+            @close="switchPickerClose('isVisible1')"
             @choose="setChooseValue1"
             @choose="setChooseValue1"
         >
         >
         </nut-calendar>
         </nut-calendar>
-        <nut-calendar :is-visible="isVisible3"
+        <nut-calendar :is-visible.sync="isVisible3"
             :default-value="date3"
             :default-value="date3"
             type="range"
             type="range"
             :start-date="null"
             :start-date="null"
             :end-date="null"
             :end-date="null"
-            @close="switchPicker('isVisible3')"
+            @close="switchPickerClose('isVisible3')"
             @choose="setChooseValue3"
             @choose="setChooseValue3"
         >
         >
         </nut-calendar> 
         </nut-calendar> 
@@ -89,8 +89,11 @@ export default {
         };
         };
     },
     },
     methods: {
     methods: {
-       switchPicker(param) {
-            this[`${param}`] = !this[`${param}`];
+        switchPickerClose(param){
+            console.log('close:' + param)
+        },
+        switchPicker(param) {
+            this[`${param}`] = true;
         },
         },
         setChooseValue(param) {
         setChooseValue(param) {
             this.date = param[3];
             this.date = param[3];

+ 14 - 11
src/packages/calendar/doc.md

@@ -6,9 +6,9 @@
 
 
 ```html
 ```html
 <nut-calendar 
 <nut-calendar 
-    :is-visible="isVisible"
+    :is-visible.sync="isVisible"
     :default-value="date"
     :default-value="date"
-    @close="switchPicker('isVisible')"
+    @close="switchPickerClose('isVisible')"
     @choose="setChooseValue"
     @choose="setChooseValue"
     :start-date="`2018-10-11`"
     :start-date="`2018-10-11`"
     :end-date="`2020-11-11`"
     :end-date="`2020-11-11`"
@@ -20,10 +20,10 @@
 
 
 ```html
 ```html
 <nut-calendar 
 <nut-calendar 
-    :is-visible="isVisible2"
+    :is-visible.sync="isVisible2"
     :default-value="date2"
     :default-value="date2"
     :is-auto-back-fill="true"
     :is-auto-back-fill="true"
-    @close="switchPicker('isVisible2')"
+    @close="switchPickerClose('isVisible2')"
     @choose="setChooseValue2"
     @choose="setChooseValue2"
 >
 >
 </nut-calendar>
 </nut-calendar>
@@ -33,10 +33,10 @@
 
 
 ```html
 ```html
 <nut-calendar 
 <nut-calendar 
-    :is-visible="isVisible1"
+    :is-visible.sync="isVisible1"
     :default-value="date1"
     :default-value="date1"
     type="range"
     type="range"
-    @close="switchPicker('isVisible1')"
+    @close="switchPickerClose('isVisible1')"
     @choose="setChooseValue1"
     @choose="setChooseValue1"
 >
 >
 </nut-calendar>
 </nut-calendar>
@@ -46,13 +46,13 @@
 
 
 ```html
 ```html
 <nut-calendar 
 <nut-calendar 
-    :is-visible="isVisible3"
+    :is-visible.sync="isVisible3"
     :default-value="date3"
     :default-value="date3"
     type="range"
     type="range"
     :start-date="null"
     :start-date="null"
     :end-date="null"
     :end-date="null"
     :animation="`nutSlideUp`"
     :animation="`nutSlideUp`"
-    @close="switchPicker('isVisible3')"
+    @close="switchPickerClose('isVisible3')"
     @choose="setChooseValue3"
     @choose="setChooseValue3"
 >
 >
 </nut-calendar>
 </nut-calendar>
@@ -75,8 +75,11 @@ export default {
         };
         };
     },
     },
     methods: {
     methods: {
-       switchPicker(param) {
-            this[`${param}`] = !this[`${param}`];
+        switchPickerClose(param){
+            console.log('close:' + param)
+        },
+        switchPicker(param) {
+            this[`${param}`] = true;
         },
         },
         setChooseValue(param) {
         setChooseValue(param) {
             this.date = param[3];
             this.date = param[3];
@@ -100,7 +103,7 @@ export default {
 | 字段 | 说明 | 类型 | 默认值
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 |----- | ----- | ----- | ----- 
 | type | 类型,日期选择'one',区间选择'range' | String | 'one'
 | type | 类型,日期选择'one',区间选择'range' | String | 'one'
-| isVisible | 是否可见 | Boolean | false
+| isVisible | 是否可见(注意:绑定时必须`:is-visible.sync`,加sync修饰符) | Boolean | false
 | animation | 日历进入方向,右滑'nutSlideRight', 上拉'nutSlideUp' | String | 'nutSlideRight' 
 | animation | 日历进入方向,右滑'nutSlideRight', 上拉'nutSlideUp' | String | 'nutSlideRight' 
 | isAutoBackFill | 是否自动回填 | Boolean | false
 | isAutoBackFill | 是否自动回填 | Boolean | false
 | isOpenRangeSelect | 是否开启区间选择 | Boolean | false
 | isOpenRangeSelect | 是否开启区间选择 | Boolean | false