feat(datetime-picker): add visible-change and closeOnClickModal

Author: cloudIC

example/pages/datetime-picker.vue

@@ -11,6 +11,8 @@
     <mt-datetime-picker
       ref="picker1"
       v-model="value"
+      :closeOnClickModal="false"
+      @visible-change="handleVisibleChange"
       @confirm="handleChange">
     </mt-datetime-picker>
     <mt-datetime-picker
@@ -89,6 +91,10 @@
           message: '已选择 ' + value.toString(),
           position: 'bottom'
         });
+      },
+
+      handleVisibleChange(isVisible) {
+        console.log('弹窗是否展示:', isVisible);
       }
     }
   };

packages/datetime-picker/src/datetime-picker.vue

@@ -1,5 +1,5 @@
 <template>
-  <mt-popup v-model="visible" position="bottom" class="mint-datetime">
+  <mt-popup v-model="visible" :closeOnClickModal="closeOnClickModal" position="bottom" class="mint-datetime">
     <mt-picker
       :slots="dateSlots"
       @change="onChange"
@@ -124,6 +124,10 @@
         type: Number,
         default: 7
       },
+      closeOnClickModal: {
+        type: Boolean,
+        default: true
+      },
       value: null
     },
 
@@ -412,6 +416,10 @@
 
       rims() {
         this.generateSlots();
+      },
+
+      visible(val) {
+        this.$emit('visible-change', val);
       }
     },