From d42d4def98edba1d1f405dfccb38634313918e6b Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 26 Jun 2018 18:46:20 +0800
Subject: [PATCH] Modal add fullscreen prop

---
 examples/routers/modal.vue       | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
 src/components/modal/modal.vue   | 14 +++++++++++++-
 src/styles/components/modal.less | 38 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 107 insertions(+), 2 deletions(-)

diff --git a/examples/routers/modal.vue b/examples/routers/modal.vue
index 58a893b..166b07a 100644
--- a/examples/routers/modal.vue
+++ b/examples/routers/modal.vue
@@ -3,12 +3,67 @@
         <Button type="primary" @click="modal1 = true">Display dialog box</Button>
         <Modal
                 v-model="modal1"
-                title="Common Modal dialog box title"
+                :fullscreen="true"
+                footerHide
                 @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>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 09478b3..0378f2a 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -95,6 +95,10 @@
             transfer: {
                 type: Boolean,
                 default: true
+            },
+            fullscreen: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -120,7 +124,15 @@
                 return `${prefixCls}-mask`;
             },
             classes () {
-                return `${prefixCls}`;
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-fullscreen`]: this.fullscreen,
+                        [`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
+                        [`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
+
+                    }
+                ];
             },
             mainStyles () {
                 let style = {};
diff --git a/src/styles/components/modal.less b/src/styles/components/modal.less
index c68e0a1..96f025e 100644
--- a/src/styles/components/modal.less
+++ b/src/styles/components/modal.less
@@ -46,6 +46,7 @@
     }
 
     &-close {
+        z-index: 1;
         .content-close(1px, 31px);
     }
 
@@ -64,6 +65,43 @@
             margin-bottom: 0;
         }
     }
+
+    &-fullscreen{
+        width: 100% !important;
+        top: 0;
+        bottom: 0;
+        position: absolute;
+
+        @modal-header-height: 51px;
+        @modal-footer-height: 61px;
+
+        .@{modal-prefix-cls}-content{
+            width: 100%;
+            border-radius: 0;
+            position: absolute;
+            top: 0;
+            bottom: 0;
+        }
+
+        .@{modal-prefix-cls}-body{
+            width: 100%;
+            overflow: auto;
+            position: absolute;
+            top: @modal-header-height;
+            bottom: @modal-footer-height;
+        }
+        &-no-header .@{modal-prefix-cls}-body{
+            top: 0;
+        }
+        &-no-footer .@{modal-prefix-cls}-body{
+            bottom: 0;
+        }
+        .@{modal-prefix-cls}-footer{
+            position: absolute;
+            width: 100%;
+            bottom: 0;
+        }
+    }
 }
 
 @media (max-width: 768px) {
--
libgit2 0.21.4