From 1c7289e9dd4d2d8b23aad3abfada2206d2dbe963 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 26 Jun 2018 19:14:52 +0800
Subject: [PATCH] Modal add mask & dragable prop

---
 examples/routers/modal.vue       | 62 ++++++--------------------------------------------------------
 src/components/modal/modal.vue   | 33 ++++++++++++++++++++++++++-------
 src/styles/components/modal.less |  8 ++++++++
 3 files changed, 40 insertions(+), 63 deletions(-)

diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 166b07a..752a383 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -1,69 +1,16 @@
 <template>
     <div>
         <Button type="primary" @click="modal1 = true">Display dialog box</Button>
+        <Button @click="hc">Click Me</Button>
         <Modal
                 v-model="modal1"
-                :fullscreen="true"
-                footerHide
+                title="Common Modal dialog box title"
+                :mask="false"
                 @on-ok="ok"
                 @on-cancel="cancel">
-            <p>Content of dialog1111</p>
             <p>Content of dialog</p>
             <p>Content of dialog</p>
             <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-            <p>Content of dialog</p>
-
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog</p>-->
-            <!--<p>Content of dialog2222</p>-->
         </Modal>
     </div>
 </template>
@@ -80,6 +27,9 @@
             },
             cancel () {
                 this.$Message.info('Clicked cancel');
+            },
+            hc () {
+                this.$Message.info('Hello');
             }
         }
     }
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 0378f2a..e789877 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,12 +1,12 @@
 <template>
     <div v-transfer-dom :data-transfer="transfer">
         <transition :name="transitionNames[1]">
-            <div :class="maskClasses" v-show="visible" @click="mask"></div>
+            <div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
         </transition>
         <div :class="wrapClasses" @click="handleWrapClick">
             <transition :name="transitionNames[0]" @after-leave="animationFinish">
                 <div :class="classes" :style="mainStyles" v-show="visible">
-                    <div :class="[prefixCls + '-content']">
+                    <div :class="contentClasses">
                         <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
                             <slot name="close">
                                 <Icon type="ios-close"></Icon>
@@ -99,6 +99,14 @@
             fullscreen: {
                 type: Boolean,
                 default: false
+            },
+            mask: {
+                type: Boolean,
+                default: true
+            },
+            dragable: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -116,7 +124,8 @@
                     `${prefixCls}-wrap`,
                     {
                         [`${prefixCls}-hidden`]: !this.wrapShow,
-                        [`${this.className}`]: !!this.className
+                        [`${this.className}`]: !!this.className,
+                        [`${prefixCls}-no-mask`]: !this.showMask
                     }
                 ];
             },
@@ -130,7 +139,14 @@
                         [`${prefixCls}-fullscreen`]: this.fullscreen,
                         [`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
                         [`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
-
+                    }
+                ];
+            },
+            contentClasses () {
+                return [
+                    `${prefixCls}-content`,
+                    {
+                        [`${prefixCls}-content-no-mask`]: !this.showMask
                     }
                 ];
             },
@@ -161,6 +177,9 @@
                 } else {
                     return this.cancelText;
                 }
+            },
+            showMask () {
+                return this.dragable ? false : this.mask;
             }
         },
         methods: {
@@ -169,15 +188,15 @@
                 this.$emit('input', false);
                 this.$emit('on-cancel');
             },
-            mask () {
-                if (this.maskClosable) {
+            handleMask () {
+                if (this.maskClosable && this.showMask) {
                     this.close();
                 }
             },
             handleWrapClick (event) {
                 // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
                 const className = event.target.getAttribute('class');
-                if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
+                if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
             },
             cancel () {
                 this.close();
diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less
index 96f025e..49ee43b 100644
--- a/src/styles/components/modal.less
+++ b/src/styles/components/modal.less
@@ -39,6 +39,11 @@
         border: 0;
         border-radius: @border-radius-base;
         background-clip: padding-box;
+        box-shadow: 0 4px 12px rgba(0,0,0,.15);
+
+        &-no-mask{
+            pointer-events: auto;
+        }
     }
 
     &-header {
@@ -102,6 +107,9 @@
             bottom: 0;
         }
     }
+    &-no-mask{
+        pointer-events: none;
+    }
 }
 
 @media (max-width: 768px) {
--
libgit2 0.21.4