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

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

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

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

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