update Modal

change DOM of Modal，fixed mask scroll bug in chrome 55，fixed mask cover scrollbar bug

update Modal
change DOM of Modal，fixed mask scroll bug in chrome 55，fixed mask cover scrollbar bug
梁灏
1 parent c13e7cea
Showing 3 changed files with 31 additions and 25 deletions Show diff stats
src/components/modal/modal.vue
src/styles/mixins/mask.less
test/routers/more.vue
 <template>
-    <div :class="wrapClasses">
-        <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
+    <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
+    <div :class="wrapClasses" @click="handleWrapClick">
         <div :class="classes" :style="styles" v-show="visible" transition="ease">
             <div :class="[prefixCls + '-content']">
                 <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
@@ -130,6 +130,10 @@
                     this.close();
                 }
             },
+            handleWrapClick (event) {
+                // use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
+                if (event.target.getAttribute('class').indexOf(`${prefixCls}-wrap`) > -1) this.mask();
+            },
             cancel () {
                 this.close();
             },
@@ -6,6 +6,7 @@
     right: 0;
     background-color: rgba(55, 55, 55, 0.6);
     height: 100%;
+    z-index: @zindex-modal;
  
     &-hidden {
         display: none;
-<style>
-    body{
-        height: 2000px !important;
+<style lang="less">
+    .vertical-center-modal{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+    .ivu-modal{
+        top: 0;
+    }
     }
 </style>
 <template>
-    <i-button type="primary" @click="modal1 = true">显示对话框</i-button>
-    <i-button @click="scrollable = !scrollable">Toggle scrollable</i-button>
-    scrollable:{{scrollable}}
+    <i-button @click="modal9 = true">距离顶部 20px</i-button>
     <Modal
-            :visible.sync="modal1"
-            title="普通的Modal对话框标题"
-            :scrollable="scrollable"
-            @on-ok="ok"
-            @on-cancel="cancel">
+            title="对话框标题"
+            :visible.sync="modal9"
+            :style="{top: '20px'}">
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+        <p>对话框内容</p>
+    </Modal>
+    <i-button @click="modal10 = true">垂直居中</i-button>
+    <Modal
+            title="对话框标题"
+            :visible.sync="modal10"
+            class-name="vertical-center-modal">
         <p>对话框内容</p>
         <p>对话框内容</p>
         <p>对话框内容</p>
-        <i-button @click="scrollable = !scrollable">Toggle scrollable</i-button>
     </Modal>
 </template>
 <script>
     export default {
         data () {
             return {
-                modal1: false,
-                scrollable: false
-            }
-        },
-        methods: {
-            ok () {
-                this.$nextTick(() => this.modal1 = true);
-                this.$Message.info('点击了确定');
-            },
-            cancel () {
-                this.$Message.info('点击了取消');
+                modal9: false,
+                modal10: false,
             }
         }
     }