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> <Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Modal <Modal
v-model="modal1" v-model="modal1"
title="Common Modal dialog box title" :fullscreen="true"
footerHide
@on-ok="ok" @on-ok="ok"
@on-cancel="cancel"> @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 dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog2222</p>-->
</Modal> </Modal>
</div> </div>
</template> </template>

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

@ -95,6 +95,10 @@
transfer: { transfer: {
type: Boolean, type: Boolean,
default: true default: true
},
fullscreen: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -120,7 +124,15 @@
return `${prefixCls}-mask`; return `${prefixCls}-mask`;
}, },
classes () { 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 () { mainStyles () {
let style = {}; let style = {};

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

@ -46,6 +46,7 @@
} }
&-close { &-close {
z-index: 1;
.content-close(1px, 31px); .content-close(1px, 31px);
} }
@ -64,6 +65,43 @@
margin-bottom: 0; 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) { @media (max-width: 768px) {