other / mew-iview

Commit d42d4def98edba1d1f405dfccb38634313918e6b

Authored by 梁灏
1 parent 877c7fd8

Modal add fullscreen prop

Showing 3 changed files with 107 additions and 2 deletions   Show diff stats
Inline Side-by-side
examples/routers/modal.vue
  Show/Hide comments   View file @d42d4de
... ... @@ -3,12 +3,67 @@
3 3 <Button type="primary" @click="modal1 = true">Display dialog box</Button>
4 4 <Modal
5 5 v-model="modal1"
6   - title="Common Modal dialog box title"
  6 + :fullscreen="true"
  7 + footerHide
7 8 @on-ok="ok"
8 9 @on-cancel="cancel">
  10 + <p>Content of dialog1111</p>
9 11 <p>Content of dialog</p>
10 12 <p>Content of dialog</p>
11 13 <p>Content of dialog</p>
  14 + <p>Content of dialog</p>
  15 + <p>Content of dialog</p>
  16 + <p>Content of dialog</p>
  17 + <p>Content of dialog</p>
  18 + <p>Content of dialog</p>
  19 + <p>Content of dialog</p>
  20 + <p>Content of dialog</p>
  21 + <p>Content of dialog</p>
  22 + <p>Content of dialog</p>
  23 + <p>Content of dialog</p>
  24 + <p>Content of dialog</p>
  25 + <p>Content of dialog</p>
  26 +
  27 + <!--<p>Content of dialog</p>-->
  28 + <!--<p>Content of dialog</p>-->
  29 + <!--<p>Content of dialog</p>-->
  30 + <!--<p>Content of dialog</p>-->
  31 + <!--<p>Content of dialog</p>-->
  32 + <!--<p>Content of dialog</p>-->
  33 + <!--<p>Content of dialog</p>-->
  34 + <!--<p>Content of dialog</p>-->
  35 + <!--<p>Content of dialog</p>-->
  36 + <!--<p>Content of dialog</p>-->
  37 + <!--<p>Content of dialog</p>-->
  38 + <!--<p>Content of dialog</p>-->
  39 + <!--<p>Content of dialog</p>-->
  40 + <!--<p>Content of dialog</p>-->
  41 + <!--<p>Content of dialog</p>-->
  42 + <!--<p>Content of dialog</p>-->
  43 + <!--<p>Content of dialog</p>-->
  44 + <!--<p>Content of dialog</p>-->
  45 + <!--<p>Content of dialog</p>-->
  46 + <!--<p>Content of dialog</p>-->
  47 + <!--<p>Content of dialog</p>-->
  48 + <!--<p>Content of dialog</p>-->
  49 + <!--<p>Content of dialog</p>-->
  50 + <!--<p>Content of dialog</p>-->
  51 + <!--<p>Content of dialog</p>-->
  52 + <!--<p>Content of dialog</p>-->
  53 + <!--<p>Content of dialog</p>-->
  54 + <!--<p>Content of dialog</p>-->
  55 + <!--<p>Content of dialog</p>-->
  56 + <!--<p>Content of dialog</p>-->
  57 + <!--<p>Content of dialog</p>-->
  58 + <!--<p>Content of dialog</p>-->
  59 + <!--<p>Content of dialog</p>-->
  60 + <!--<p>Content of dialog</p>-->
  61 + <!--<p>Content of dialog</p>-->
  62 + <!--<p>Content of dialog</p>-->
  63 + <!--<p>Content of dialog</p>-->
  64 + <!--<p>Content of dialog</p>-->
  65 + <!--<p>Content of dialog</p>-->
  66 + <!--<p>Content of dialog2222</p>-->
12 67 </Modal>
13 68 </div>
14 69 </template>
... ...
src/components/modal/modal.vue
  Show/Hide comments   View file @d42d4de
... ... @@ -95,6 +95,10 @@
95 95 transfer: {
96 96 type: Boolean,
97 97 default: true
  98 + },
  99 + fullscreen: {
  100 + type: Boolean,
  101 + default: false
98 102 }
99 103 },
100 104 data () {
... ... @@ -120,7 +124,15 @@
120 124 return `${prefixCls}-mask`;
121 125 },
122 126 classes () {
123   - return `${prefixCls}`;
  127 + return [
  128 + `${prefixCls}`,
  129 + {
  130 + [`${prefixCls}-fullscreen`]: this.fullscreen,
  131 + [`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
  132 + [`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
  133 +
  134 + }
  135 + ];
124 136 },
125 137 mainStyles () {
126 138 let style = {};
... ...
src/styles/components/modal.less
  Show/Hide comments   View file @d42d4de
... ... @@ -46,6 +46,7 @@
46 46 }
47 47  
48 48 &-close {
  49 + z-index: 1;
49 50 .content-close(1px, 31px);
50 51 }
51 52  
... ... @@ -64,6 +65,43 @@
64 65 margin-bottom: 0;
65 66 }
66 67 }
  68 +
  69 + &-fullscreen{
  70 + width: 100% !important;
  71 + top: 0;
  72 + bottom: 0;
  73 + position: absolute;
  74 +
  75 + @modal-header-height: 51px;
  76 + @modal-footer-height: 61px;
  77 +
  78 + .@{modal-prefix-cls}-content{
  79 + width: 100%;
  80 + border-radius: 0;
  81 + position: absolute;
  82 + top: 0;
  83 + bottom: 0;
  84 + }
  85 +
  86 + .@{modal-prefix-cls}-body{
  87 + width: 100%;
  88 + overflow: auto;
  89 + position: absolute;
  90 + top: @modal-header-height;
  91 + bottom: @modal-footer-height;
  92 + }
  93 + &-no-header .@{modal-prefix-cls}-body{
  94 + top: 0;
  95 + }
  96 + &-no-footer .@{modal-prefix-cls}-body{
  97 + bottom: 0;
  98 + }
  99 + .@{modal-prefix-cls}-footer{
  100 + position: absolute;
  101 + width: 100%;
  102 + bottom: 0;
  103 + }
  104 + }
67 105 }
68 106  
69 107 @media (max-width: 768px) {
... ...