feat(ActionSheet, Dialog, Picker, Toast): support mask-closable

#221

src/common/mixins/basic-picker.js

@@ -22,6 +22,10 @@ export default {
       default() {
         return {}
       }
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {

src/components/action-sheet/action-sheet.vue

@@ -7,10 +7,10 @@
       :mask="true"
       :z-index="zIndex"
       v-show="isVisible"
-      @touchmove.prevent="noop"
-      @mask-click="cancel">
+      @touchmove.prevent
+      @mask-click="maskClick">
       <transition name="cube-action-sheet-move">
-        <div class="cube-action-sheet-panel cube-safe-area-pb" v-show="isVisible" @click.stop="noop">
+        <div class="cube-action-sheet-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
           <h1 class="cube-action-sheet-title border-bottom-1px" v-show="pickerStyle || title">{{title}}</h1>
           <div class="cube-action-sheet-content">
             <ul class="cube-action-sheet-list">
@@ -64,10 +64,15 @@
       pickerStyle: {
         type: Boolean,
         default: false
+      },
+      maskClosable: {
+        type: Boolean,
+        default: true
       }
     },
     methods: {
-      noop() {
+      maskClick() {
+        this.maskClosable && this.cancel()
       },
       cancel() {
         this.hide()

src/components/dialog/dialog.vue

 <template>
   <transition name="cube-dialog-fade">
-    <cube-popup type="dialog" :z-index="zIndex" :mask="true" :center="true" v-show="isVisible">
+    <cube-popup
+      type="dialog"
+      :z-index="zIndex"
+      :mask="true"
+      :center="true"
+      v-show="isVisible"
+      @mask-click="maskClick"
+      >
       <div class="cube-dialog-main">
         <span class="cube-dialog-close" v-show="showClose" @click="close"><i class="cubeic-close"></i></span>
         <div :class="containerClass">
@@ -122,6 +129,9 @@
       }
     },
     methods: {
+      maskClick(e) {
+        this.maskClosable && this.cancel(e)
+      },
       confirm(e) {
         if (this._confirmBtn.disabled) {
           return

src/components/picker/picker.vue

@@ -8,7 +8,7 @@
       :z-index="zIndex"
       v-show="isVisible"
       @touchmove.prevent
-      @mask-click="cancel">
+      @mask-click="maskClick">
       <transition name="cube-picker-move">
         <div class="cube-picker-panel cube-safe-area-pb" v-show="isVisible" @click.stop>
           <div class="cube-picker-choose border-bottom-1px">
@@ -123,6 +123,9 @@
           this.$emit(EVENT_VALUE_CHANGE, this.pickerSelectedVal, this.pickerSelectedIndex, pickerSelectedText)
         }
       },
+      maskClick() {
+        this.maskClosable && this.cancel()
+      },
       cancel() {
         this.hide()
         this.$emit(EVENT_CANCEL)

src/components/toast/toast.vue

 <template>
   <transition name="cube-toast-fade">
-    <cube-popup type="toast" :z-index="zIndex" :mask="mask" v-show="isVisible">
+    <cube-popup
+      type="toast"
+      :z-index="zIndex"
+      :mask="mask"
+      v-show="isVisible"
+      @mask-click="maskClick"
+      >
       <i v-show="!isLoading" class="cube-toast-icon" :class="iconClass"></i>
       <cube-loading v-show="isLoading"></cube-loading>
       <div v-show="txt" class="cube-toast-tip" v-html="txt"></div>
@@ -69,6 +75,9 @@
       }
     },
     methods: {
+      maskClick() {
+        this.maskClosable && this.hide()
+      },
       show() {
         this.isVisible = true
         this.clearTimer()