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

support Modal

Browse source 
support Modal
This commit is contained in:
梁灏 2017-03-09 18:31:47 +08:00
parent f97e5bb01a
commit 6259471f4c
9 changed files with 153 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,24 +1,30 @@
<template>
<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">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
<i-button type="text" size="large" @click="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
</slot>
<span>
<transition name="fade">
<div :class="maskClasses" v-show="visible" @click="mask"></div>
</transition>
<div :class="wrapClasses" @click="handleWrapClick">
<transition name="ease">
<div :class="classes" :style="mainStyles" v-show="visible">
<div :class="[prefixCls + '-content']">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
<Icon type="ios-close-empty"></Icon>
</slot>
</a>
<div :class="[prefixCls + '-header']" v-if="showHead"><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
<div :class="[prefixCls + '-body']"><slot></slot></div>
<div :class="[prefixCls + '-footer']" v-if="!footerHide">
<slot name="footer">
<i-button type="text" size="large" @click.native="cancel">{{ cancelText }}</i-button>
<i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</div>
</div>
</span>
</template>
<script>
import Icon from '../icon';
@ -31,7 +37,7 @@
export default {
components: { Icon, iButton },
props: {
visible: {
value: {
type: Boolean,
default: false
},
@ -66,7 +72,7 @@
type: Boolean,
default: false
},
style: {
styles: {
type: Object
},
className: {
@ -87,7 +93,8 @@
prefixCls: prefixCls,
wrapShow: false,
showHead: true,
buttonLoading: false
buttonLoading: false,
visible: this.value
};
},
computed: {
@ -106,14 +113,14 @@
classes () {
return `${prefixCls}`;
},
styles () {
mainStyles () {
let style = {};
const styleWidth = {
width: `${this.width}px`
};
const customStyle = this.style ? this.style : {};
const customStyle = this.styles ? this.styles : {};
Object.assign(style, styleWidth, customStyle);
@ -123,6 +130,7 @@
methods: {
close () {
this.visible = false;
this.$emit('input', false);
this.$emit('on-cancel');
},
mask () {
@ -143,6 +151,7 @@
this.buttonLoading = true;
} else {
this.visible = false;
this.$emit('input', false);
}
this.$emit('on-ok');
},
@ -182,14 +191,14 @@
this.resetScrollBar();
}
},
ready () {
mounted () {
if (this.visible) {
this.wrapShow = true;
}
let showHead = true;
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
if (this.$slots.head === undefined && !this.title) {
showHead = false;
}
@ -203,6 +212,10 @@
this.removeScrollEffect();
},
watch: {
value (val) {
this.visible = val;
console.log(this.visible)
},
visible (val) {
if (val === false) {
this.buttonLoading = false;