diff --git a/src/common/mixins/basic-picker.js b/src/common/mixins/basic-picker.js
index acbd2e9a16d632f7f6bd5a725eb037449f9d0143..a750c08f194735b3459b3281355db9491cce2658 100644
--- a/src/common/mixins/basic-picker.js
+++ b/src/common/mixins/basic-picker.js
@@ -22,6 +22,10 @@ export default {
       default() {
         return {}
       }
+    },
+    maskClosable: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
diff --git a/src/components/action-sheet/action-sheet.vue b/src/components/action-sheet/action-sheet.vue
index cb622da20f0987ec1e126021c1a1694c569fc53b..b8c44782f852c02b8957796598892fc667aedb93 100644
--- a/src/components/action-sheet/action-sheet.vue
+++ b/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()
diff --git a/src/components/dialog/dialog.vue b/src/components/dialog/dialog.vue
index 8c243cab0b2c8f6ed24093ed634b967c7c7668b6..54b15c322069242d7a64666bdd7417b882e724db 100644
--- a/src/components/dialog/dialog.vue
+++ b/src/components/dialog/dialog.vue
@@ -1,6 +1,13 @@
 <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
diff --git a/src/components/picker/picker.vue b/src/components/picker/picker.vue
index 4c3660e23593bebbe3ddfe2c2273946320121a95..5510fcb88114b37d14d815e55381626ed8a4cc26 100644
--- a/src/components/picker/picker.vue
+++ b/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)
diff --git a/src/components/toast/toast.vue b/src/components/toast/toast.vue
index 922ade2000c9639075d5ee2f36e369213a1ff8b1..2a130915ef12d18f10cf8a83f6ce2233816d2541 100644
--- a/src/components/toast/toast.vue
+++ b/src/components/toast/toast.vue
@@ -1,6 +1,12 @@
 <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()