drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Modal add fullscreen prop

Browse source
This commit is contained in:
梁灏 2018-06-26 18:46:20 +08:00
parent 877c7fd870
commit d42d4def98
3 changed files with 107 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
examples/routers/modal.vue
View file

@ -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>

14
src/components/modal/modal.vue
View file

@ -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 = {};

38
src/styles/components/modal.less
View file

@ -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) {