Commit f9a2e6114d4085e104658243a7316d926e2c2d1f
1 parent
ff16f096
added scrolling property to toggle CSS for creating or hiding scrollbars
Showing
2 changed files
with
20 additions
and
2 deletions
Show diff stats
src/components/modal/modal.vue
@@ -76,6 +76,10 @@ | @@ -76,6 +76,10 @@ | ||
76 | footerHide: { | 76 | footerHide: { |
77 | type: Boolean, | 77 | type: Boolean, |
78 | default: false | 78 | default: false |
79 | + }, | ||
80 | + scrolling: { | ||
81 | + type: Boolean, | ||
82 | + default: false | ||
79 | } | 83 | } |
80 | }, | 84 | }, |
81 | data () { | 85 | data () { |
@@ -204,13 +208,22 @@ | @@ -204,13 +208,22 @@ | ||
204 | } else { | 208 | } else { |
205 | if (this.timer) clearTimeout(this.timer); | 209 | if (this.timer) clearTimeout(this.timer); |
206 | this.wrapShow = true; | 210 | this.wrapShow = true; |
207 | - this.addScrollEffect(); | 211 | + if (!this.scrolling) { |
212 | + this.addScrollEffect(); | ||
213 | + } | ||
208 | } | 214 | } |
209 | }, | 215 | }, |
210 | loading (val) { | 216 | loading (val) { |
211 | if (!val) { | 217 | if (!val) { |
212 | this.buttonLoading = false; | 218 | this.buttonLoading = false; |
213 | } | 219 | } |
220 | + }, | ||
221 | + scrolling (val) { | ||
222 | + if (!this.scrolling) { | ||
223 | + this.addScrollEffect(); | ||
224 | + } else { | ||
225 | + this.removeScrollEffect(); | ||
226 | + } | ||
214 | } | 227 | } |
215 | } | 228 | } |
216 | }; | 229 | }; |
test/routers/more.vue
@@ -5,21 +5,26 @@ | @@ -5,21 +5,26 @@ | ||
5 | </style> | 5 | </style> |
6 | <template> | 6 | <template> |
7 | <i-button type="primary" @click="modal1 = true">显示对话框</i-button> | 7 | <i-button type="primary" @click="modal1 = true">显示对话框</i-button> |
8 | + <i-button @click="scrolling = !scrolling">Toggle Scrolling</i-button> | ||
9 | + Scrolling:{{scrolling}} | ||
8 | <Modal | 10 | <Modal |
9 | :visible.sync="modal1" | 11 | :visible.sync="modal1" |
10 | title="普通的Modal对话框标题" | 12 | title="普通的Modal对话框标题" |
13 | + :scrolling="scrolling" | ||
11 | @on-ok="ok" | 14 | @on-ok="ok" |
12 | @on-cancel="cancel"> | 15 | @on-cancel="cancel"> |
13 | <p>对话框内容</p> | 16 | <p>对话框内容</p> |
14 | <p>对话框内容</p> | 17 | <p>对话框内容</p> |
15 | <p>对话框内容</p> | 18 | <p>对话框内容</p> |
19 | + <i-button @click="scrolling = !scrolling">Toggle Scrolling</i-button> | ||
16 | </Modal> | 20 | </Modal> |
17 | </template> | 21 | </template> |
18 | <script> | 22 | <script> |
19 | export default { | 23 | export default { |
20 | data () { | 24 | data () { |
21 | return { | 25 | return { |
22 | - modal1: false | 26 | + modal1: false, |
27 | + scrolling: false | ||
23 | } | 28 | } |
24 | }, | 29 | }, |
25 | methods: { | 30 | methods: { |