added scrolling property to toggle CSS for creating or hiding scrollbars

This commit is contained in:
Rijn 2017-01-24 13:36:13 -06:00
parent ff16f09614
commit f9a2e6114d
2 changed files with 20 additions and 2 deletions

View file

@ -76,6 +76,10 @@
footerHide: { footerHide: {
type: Boolean, type: Boolean,
default: false default: false
},
scrolling: {
type: Boolean,
default: false
} }
}, },
data () { data () {
@ -204,13 +208,22 @@
} else { } else {
if (this.timer) clearTimeout(this.timer); if (this.timer) clearTimeout(this.timer);
this.wrapShow = true; this.wrapShow = true;
if (!this.scrolling) {
this.addScrollEffect(); this.addScrollEffect();
} }
}
}, },
loading (val) { loading (val) {
if (!val) { if (!val) {
this.buttonLoading = false; this.buttonLoading = false;
} }
},
scrolling (val) {
if (!this.scrolling) {
this.addScrollEffect();
} else {
this.removeScrollEffect();
}
} }
} }
}; };

View file

@ -5,21 +5,26 @@
</style> </style>
<template> <template>
<i-button type="primary" @click="modal1 = true">显示对话框</i-button> <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
<i-button @click="scrolling = !scrolling">Toggle Scrolling</i-button>
Scrolling:{{scrolling}}
<Modal <Modal
:visible.sync="modal1" :visible.sync="modal1"
title="普通的Modal对话框标题" title="普通的Modal对话框标题"
:scrolling="scrolling"
@on-ok="ok" @on-ok="ok"
@on-cancel="cancel"> @on-cancel="cancel">
<p>对话框内容</p> <p>对话框内容</p>
<p>对话框内容</p> <p>对话框内容</p>
<p>对话框内容</p> <p>对话框内容</p>
<i-button @click="scrolling = !scrolling">Toggle Scrolling</i-button>
</Modal> </Modal>
</template> </template>
<script> <script>
export default { export default {
data () { data () {
return { return {
modal1: false modal1: false,
scrolling: false
} }
}, },
methods: { methods: {