Commit 09bce8de8399cb19fd8dc625851a6d5d61fb898e
1 parent
c13e7cea
update Modal
change DOM of Modal，fixed mask scroll bug in chrome 55，fixed mask cover scrollbar bug
Showing
3 changed files
with
31 additions
and
25 deletions
Show diff stats
src/components/modal/modal.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="wrapClasses"> | ||
| 3 | - <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div> | 2 | + <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div> |
| 3 | + <div :class="wrapClasses" @click="handleWrapClick"> | ||
| 4 | <div :class="classes" :style="styles" v-show="visible" transition="ease"> | 4 | <div :class="classes" :style="styles" v-show="visible" transition="ease"> |
| 5 | <div :class="[prefixCls + '-content']"> | 5 | <div :class="[prefixCls + '-content']"> |
| 6 | <a :class="[prefixCls + '-close']" v-if="closable" @click="close"> | 6 | <a :class="[prefixCls + '-close']" v-if="closable" @click="close"> |
| @@ -130,6 +130,10 @@ | @@ -130,6 +130,10 @@ | ||
| 130 | this.close(); | 130 | this.close(); |
| 131 | } | 131 | } |
| 132 | }, | 132 | }, |
| 133 | + handleWrapClick (event) { | ||
| 134 | + // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className | ||
| 135 | + if (event.target.getAttribute('class').indexOf(`${prefixCls}-wrap`) > -1) this.mask(); | ||
| 136 | + }, | ||
| 133 | cancel () { | 137 | cancel () { |
| 134 | this.close(); | 138 | this.close(); |
| 135 | }, | 139 | }, |
src/styles/mixins/mask.less
test/routers/more.vue
| 1 | -<style> | ||
| 2 | - body{ | ||
| 3 | - height: 2000px !important; | 1 | +<style lang="less"> |
| 2 | + .vertical-center-modal{ | ||
| 3 | + display: flex; | ||
| 4 | + align-items: center; | ||
| 5 | + justify-content: center; | ||
| 6 | + | ||
| 7 | + .ivu-modal{ | ||
| 8 | + top: 0; | ||
| 9 | + } | ||
| 4 | } | 10 | } |
| 5 | </style> | 11 | </style> |
| 6 | <template> | 12 | <template> |
| 7 | - <i-button type="primary" @click="modal1 = true">显示对话框</i-button> | ||
| 8 | - <i-button @click="scrollable = !scrollable">Toggle scrollable</i-button> | ||
| 9 | - scrollable:{{scrollable}} | 13 | + <i-button @click="modal9 = true">距离顶部 20px</i-button> |
| 10 | <Modal | 14 | <Modal |
| 11 | - :visible.sync="modal1" | ||
| 12 | - title="普通的Modal对话框标题" | ||
| 13 | - :scrollable="scrollable" | ||
| 14 | - @on-ok="ok" | ||
| 15 | - @on-cancel="cancel"> | 15 | + title="对话框标题" |
| 16 | + :visible.sync="modal9" | ||
| 17 | + :style="{top: '20px'}"> | ||
| 18 | + <p>对话框内容</p> | ||
| 19 | + <p>对话框内容</p> | ||
| 20 | + <p>对话框内容</p> | ||
| 21 | + </Modal> | ||
| 22 | + <i-button @click="modal10 = true">垂直居中</i-button> | ||
| 23 | + <Modal | ||
| 24 | + title="对话框标题" | ||
| 25 | + :visible.sync="modal10" | ||
| 26 | + class-name="vertical-center-modal"> | ||
| 16 | <p>对话框内容</p> | 27 | <p>对话框内容</p> |
| 17 | <p>对话框内容</p> | 28 | <p>对话框内容</p> |
| 18 | <p>对话框内容</p> | 29 | <p>对话框内容</p> |
| 19 | - <i-button @click="scrollable = !scrollable">Toggle scrollable</i-button> | ||
| 20 | </Modal> | 30 | </Modal> |
| 21 | </template> | 31 | </template> |
| 22 | <script> | 32 | <script> |
| 23 | export default { | 33 | export default { |
| 24 | data () { | 34 | data () { |
| 25 | return { | 35 | return { |
| 26 | - modal1: false, | ||
| 27 | - scrollable: false | ||
| 28 | - } | ||
| 29 | - }, | ||
| 30 | - methods: { | ||
| 31 | - ok () { | ||
| 32 | - this.$nextTick(() => this.modal1 = true); | ||
| 33 | - this.$Message.info('点击了确定'); | ||
| 34 | - }, | ||
| 35 | - cancel () { | ||
| 36 | - this.$Message.info('点击了取消'); | 36 | + modal9: false, |
| 37 | + modal10: false, | ||
| 37 | } | 38 | } |
| 38 | } | 39 | } |
| 39 | } | 40 | } |