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