chenhaodong / mew-iview

Commit 1c7289e9dd4d2d8b23aad3abfada2206d2dbe963

Authored by 梁灏
1 parent d42d4def

Modal add mask & dragable prop

Showing 3 changed files with 40 additions and 63 deletions   Show diff stats
Inline Side-by-side
examples/routers/modal.vue
  Show/Hide comments   View file @1c7289e
1 1 <template>
2 2 <div>
3 3 <Button type="primary" @click="modal1 = true">Display dialog box</Button>
  4 + <Button @click="hc">Click Me</Button>
4 5 <Modal
5 6 v-model="modal1"
6   - :fullscreen="true"
7   - footerHide
  7 + title="Common Modal dialog box title"
  8 + :mask="false"
8 9 @on-ok="ok"
9 10 @on-cancel="cancel">
10   - <p>Content of dialog1111</p>
11 11 <p>Content of dialog</p>
12 12 <p>Content of dialog</p>
13 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>-->
67 14 </Modal>
68 15 </div>
69 16 </template>
... ... @@ -80,6 +27,9 @@
80 27 },
81 28 cancel () {
82 29 this.$Message.info('Clicked cancel');
  30 + },
  31 + hc () {
  32 + this.$Message.info('Hello');
83 33 }
84 34 }
85 35 }
... ...
src/components/modal/modal.vue
  Show/Hide comments   View file @1c7289e
1 1 <template>
2 2 <div v-transfer-dom :data-transfer="transfer">
3 3 <transition :name="transitionNames[1]">
4   - <div :class="maskClasses" v-show="visible" @click="mask"></div>
  4 + <div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
5 5 </transition>
6 6 <div :class="wrapClasses" @click="handleWrapClick">
7 7 <transition :name="transitionNames[0]" @after-leave="animationFinish">
8 8 <div :class="classes" :style="mainStyles" v-show="visible">
9   - <div :class="[prefixCls + '-content']">
  9 + <div :class="contentClasses">
10 10 <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
11 11 <slot name="close">
12 12 <Icon type="ios-close"></Icon>
... ... @@ -99,6 +99,14 @@
99 99 fullscreen: {
100 100 type: Boolean,
101 101 default: false
  102 + },
  103 + mask: {
  104 + type: Boolean,
  105 + default: true
  106 + },
  107 + dragable: {
  108 + type: Boolean,
  109 + default: false
102 110 }
103 111 },
104 112 data () {
... ... @@ -116,7 +124,8 @@
116 124 `${prefixCls}-wrap`,
117 125 {
118 126 [`${prefixCls}-hidden`]: !this.wrapShow,
119   - [`${this.className}`]: !!this.className
  127 + [`${this.className}`]: !!this.className,
  128 + [`${prefixCls}-no-mask`]: !this.showMask
120 129 }
121 130 ];
122 131 },
... ... @@ -130,7 +139,14 @@
130 139 [`${prefixCls}-fullscreen`]: this.fullscreen,
131 140 [`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
132 141 [`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
133   -
  142 + }
  143 + ];
  144 + },
  145 + contentClasses () {
  146 + return [
  147 + `${prefixCls}-content`,
  148 + {
  149 + [`${prefixCls}-content-no-mask`]: !this.showMask
134 150 }
135 151 ];
136 152 },
... ... @@ -161,6 +177,9 @@
161 177 } else {
162 178 return this.cancelText;
163 179 }
  180 + },
  181 + showMask () {
  182 + return this.dragable ? false : this.mask;
164 183 }
165 184 },
166 185 methods: {
... ... @@ -169,15 +188,15 @@
169 188 this.$emit('input', false);
170 189 this.$emit('on-cancel');
171 190 },
172   - mask () {
173   - if (this.maskClosable) {
  191 + handleMask () {
  192 + if (this.maskClosable && this.showMask) {
174 193 this.close();
175 194 }
176 195 },
177 196 handleWrapClick (event) {
178 197 // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
179 198 const className = event.target.getAttribute('class');
180   - if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
  199 + if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
181 200 },
182 201 cancel () {
183 202 this.close();
... ...
src/styles/components/modal.less
  Show/Hide comments   View file @1c7289e
... ... @@ -39,6 +39,11 @@
39 39 border: 0;
40 40 border-radius: @border-radius-base;
41 41 background-clip: padding-box;
  42 + box-shadow: 0 4px 12px rgba(0,0,0,.15);
  43 +
  44 + &-no-mask{
  45 + pointer-events: auto;
  46 + }
42 47 }
43 48  
44 49 &-header {
... ... @@ -102,6 +107,9 @@
102 107 bottom: 0;
103 108 }
104 109 }
  110 + &-no-mask{
  111 + pointer-events: none;
  112 + }
105 113 }
106 114  
107 115 @media (max-width: 768px) {
... ...