From 09bce8de8399cb19fd8dc625851a6d5d61fb898e Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 21 Feb 2017 11:36:41 +0800
Subject: [PATCH] update Modal
---
src/components/modal/modal.vue | 8 ++++++--
src/styles/mixins/mask.less | 1 +
test/routers/more.vue | 47 ++++++++++++++++++++++++-----------------------
3 files changed, 31 insertions(+), 25 deletions(-)
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 82265d2..0ace491 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -1,6 +1,6 @@
<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();
},
diff --git a/src/styles/mixins/mask.less b/src/styles/mixins/mask.less
index 2d69d4e..6631950 100644
--- a/src/styles/mixins/mask.less
+++ b/src/styles/mixins/mask.less
@@ -6,6 +6,7 @@
right: 0;
background-color: rgba(55, 55, 55, 0.6);
height: 100%;
+ z-index: @zindex-modal;
&-hidden {
display: none;
diff --git a/test/routers/more.vue b/test/routers/more.vue
index 9a702f2..aa1c63a 100644
--- a/test/routers/more.vue
+++ b/test/routers/more.vue
@@ -1,39 +1,40 @@
-<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,
}
}
}
--
libgit2 0.21.4