From 57a0a4ec32e707743792df258b8a526704bc8f20 Mon Sep 17 00:00:00 2001
From: dolymood <dolymood@gmail.com>
Date: Wed, 6 Jun 2018 16:12:59 +0800
Subject: [PATCH] feat(ActionSheet, Dialog, Picker, Toast): support
 mask-closable

#221
---
 src/common/mixins/basic-picker.js            |  4 ++++
 src/components/action-sheet/action-sheet.vue | 13 +++++++++----
 src/components/dialog/dialog.vue             | 12 +++++++++++-
 src/components/picker/picker.vue             |  5 ++++-
 src/components/toast/toast.vue               | 11 ++++++++++-
 5 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/common/mixins/basic-picker.js b/src/common/mixins/basic-picker.js
index acbd2e9a..a750c08f 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 cb622da2..b8c44782 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 8c243cab..54b15c32 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 4c3660e2..5510fcb8 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 922ade20..2a130915 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()
-- 
GitLab