other / 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 <template> 1 <template>
2 <div> 2 <div>
3 <Button type="primary" @click="modal1 = true">Display dialog box</Button> 3 <Button type="primary" @click="modal1 = true">Display dialog box</Button>
  4 + <Button @click="hc">Click Me</Button>
4 <Modal 5 <Modal
5 v-model="modal1" 6 v-model="modal1"
6 - :fullscreen="true"  
7 - footerHide 7 + title="Common Modal dialog box title"
  8 + :mask="false"
8 @on-ok="ok" 9 @on-ok="ok"
9 @on-cancel="cancel"> 10 @on-cancel="cancel">
10 - <p>Content of dialog1111</p>  
11 <p>Content of dialog</p> 11 <p>Content of dialog</p>
12 <p>Content of dialog</p> 12 <p>Content of dialog</p>
13 <p>Content of dialog</p> 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 </Modal> 14 </Modal>
68 </div> 15 </div>
69 </template> 16 </template>
@@ -80,6 +27,9 @@ @@ -80,6 +27,9 @@
80 }, 27 },
81 cancel () { 28 cancel () {
82 this.$Message.info('Clicked cancel'); 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 <template> 1 <template>
2 <div v-transfer-dom :data-transfer="transfer"> 2 <div v-transfer-dom :data-transfer="transfer">
3 <transition :name="transitionNames[1]"> 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 </transition> 5 </transition>
6 <div :class="wrapClasses" @click="handleWrapClick"> 6 <div :class="wrapClasses" @click="handleWrapClick">
7 <transition :name="transitionNames[0]" @after-leave="animationFinish"> 7 <transition :name="transitionNames[0]" @after-leave="animationFinish">
8 <div :class="classes" :style="mainStyles" v-show="visible"> 8 <div :class="classes" :style="mainStyles" v-show="visible">
9 - <div :class="[prefixCls + '-content']"> 9 + <div :class="contentClasses">
10 <a :class="[prefixCls + '-close']" v-if="closable" @click="close"> 10 <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
11 <slot name="close"> 11 <slot name="close">
12 <Icon type="ios-close"></Icon> 12 <Icon type="ios-close"></Icon>
@@ -99,6 +99,14 @@ @@ -99,6 +99,14 @@
99 fullscreen: { 99 fullscreen: {
100 type: Boolean, 100 type: Boolean,
101 default: false 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 data () { 112 data () {
@@ -116,7 +124,8 @@ @@ -116,7 +124,8 @@
116 `${prefixCls}-wrap`, 124 `${prefixCls}-wrap`,
117 { 125 {
118 [`${prefixCls}-hidden`]: !this.wrapShow, 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,7 +139,14 @@
130 [`${prefixCls}-fullscreen`]: this.fullscreen, 139 [`${prefixCls}-fullscreen`]: this.fullscreen,
131 [`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead, 140 [`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
132 [`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide 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,6 +177,9 @@
161 } else { 177 } else {
162 return this.cancelText; 178 return this.cancelText;
163 } 179 }
  180 + },
  181 + showMask () {
  182 + return this.dragable ? false : this.mask;
164 } 183 }
165 }, 184 },
166 methods: { 185 methods: {
@@ -169,15 +188,15 @@ @@ -169,15 +188,15 @@
169 this.$emit('input', false); 188 this.$emit('input', false);
170 this.$emit('on-cancel'); 189 this.$emit('on-cancel');
171 }, 190 },
172 - mask () {  
173 - if (this.maskClosable) { 191 + handleMask () {
  192 + if (this.maskClosable && this.showMask) {
174 this.close(); 193 this.close();
175 } 194 }
176 }, 195 },
177 handleWrapClick (event) { 196 handleWrapClick (event) {
178 // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className 197 // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
179 const className = event.target.getAttribute('class'); 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 cancel () { 201 cancel () {
183 this.close(); 202 this.close();
src/styles/components/modal.less
  Show/Hide comments   View file @1c7289e
@@ -39,6 +39,11 @@ @@ -39,6 +39,11 @@
39 border: 0; 39 border: 0;
40 border-radius: @border-radius-base; 40 border-radius: @border-radius-base;
41 background-clip: padding-box; 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 &-header { 49 &-header {
@@ -102,6 +107,9 @@ @@ -102,6 +107,9 @@
102 bottom: 0; 107 bottom: 0;
103 } 108 }
104 } 109 }
  110 + &-no-mask{
  111 + pointer-events: none;
  112 + }
105 } 113 }
106 114
107 @media (max-width: 768px) { 115 @media (max-width: 768px) {