drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Modal add mask & dragable prop

Browse source
This commit is contained in:
梁灏 2018-06-26 19:14:52 +08:00
parent d42d4def98
commit 1c7289e9dd
3 changed files with 40 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
examples/routers/modal.vue
View file

@ -1,69 +1,16 @@
<template>
<div>
<Button type="primary" @click="modal1 = true">Display dialog box</Button>
<Button @click="hc">Click Me</Button>
<Modal
v-model="modal1"
:fullscreen="true"
footerHide
title="Common Modal dialog box title"
:mask="false"
@on-ok="ok"
@on-cancel="cancel">
<p>Content of dialog1111</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<p>Content of dialog</p>
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog</p>-->
<!--<p>Content of dialog2222</p>-->
</Modal>
</div>
</template>
@ -80,6 +27,9 @@
},
cancel () {
this.$Message.info('Clicked cancel');
},
hc () {
this.$Message.info('Hello');
}
}
}

33
src/components/modal/modal.vue
View file

@ -1,12 +1,12 @@
<template>
<div v-transfer-dom :data-transfer="transfer">
<transition :name="transitionNames[1]">
<div :class="maskClasses" v-show="visible" @click="mask"></div>
<div :class="maskClasses" v-show="visible" v-if="showMask" @click="handleMask"></div>
</transition>
<div :class="wrapClasses" @click="handleWrapClick">
<transition :name="transitionNames[0]" @after-leave="animationFinish">
<div :class="classes" :style="mainStyles" v-show="visible">
<div :class="[prefixCls + '-content']">
<div :class="contentClasses">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close"></Icon>
@ -99,6 +99,14 @@
fullscreen: {
type: Boolean,
default: false
},
mask: {
type: Boolean,
default: true
},
dragable: {
type: Boolean,
default: false
}
},
data () {
@ -116,7 +124,8 @@
`${prefixCls}-wrap`,
{
[`${prefixCls}-hidden`]: !this.wrapShow,
[`${this.className}`]: !!this.className
[`${this.className}`]: !!this.className,
[`${prefixCls}-no-mask`]: !this.showMask
}
];
},
@ -130,7 +139,14 @@
[`${prefixCls}-fullscreen`]: this.fullscreen,
[`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
[`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
}
];
},
contentClasses () {
return [
`${prefixCls}-content`,
{
[`${prefixCls}-content-no-mask`]: !this.showMask
}
];
},
@ -161,6 +177,9 @@
} else {
return this.cancelText;
}
},
showMask () {
return this.dragable ? false : this.mask;
}
},
methods: {
@ -169,15 +188,15 @@
this.$emit('input', false);
this.$emit('on-cancel');
},
mask () {
if (this.maskClosable) {
handleMask () {
if (this.maskClosable && this.showMask) {
this.close();
}
},
handleWrapClick (event) {
// use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
const className = event.target.getAttribute('class');
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.mask();
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
},
cancel () {
this.close();

8
src/styles/components/modal.less
View file

@ -39,6 +39,11 @@
border: 0;
border-radius: @border-radius-base;
background-clip: padding-box;
box-shadow: 0 4px 12px rgba(0,0,0,.15);
&-no-mask{
pointer-events: auto;
}
}
&-header {
@ -102,6 +107,9 @@
bottom: 0;
}
}
&-no-mask{
pointer-events: none;
}
}
@media (max-width: 768px) {