support Modal
support Modal
This commit is contained in:
梁灏
parent
f97e5bb01a
commit
6259471f4c
9 changed files with 153 additions and 39 deletions
|
|
@ -6,7 +6,7 @@
|
|||
</transition>
|
||||
</template>
|
||||
<script>
|
||||
import { oneOf } from '../../utils/assist';
|
||||
// import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-loading-bar';
|
||||
|
||||
|
|
|
|||
|
|
@ -17,18 +17,18 @@ Modal.newInstance = properties => {
|
|||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `
|
||||
<Modal${props} :visible.sync="visible" :width="width" :scrollable.sync="scrollable">
|
||||
<Modal${props} v-model="visible" :width="width" :scrollable="scrollable">
|
||||
<div class="${prefixCls}">
|
||||
<div class="${prefixCls}-head">
|
||||
<div class="${prefixCls}-head-title">{{{ title }}}</div>
|
||||
<div class="${prefixCls}-head-title" v-html="title"></div>
|
||||
</div>
|
||||
<div class="${prefixCls}-body">
|
||||
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
|
||||
{{{ body }}}
|
||||
<div v-html="body"></div>
|
||||
</div>
|
||||
<div class="${prefixCls}-footer">
|
||||
<i-button type="text" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
|
||||
<i-button type="text" size="large" v-if="showCancel" @click.native="cancel">{{ cancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ okText }}</i-button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
@ -68,7 +68,7 @@ Modal.newInstance = properties => {
|
|||
},
|
||||
methods: {
|
||||
cancel () {
|
||||
this.visible = false;
|
||||
this.$children[0].visible = false;
|
||||
this.buttonLoading = false;
|
||||
this.onCancel();
|
||||
this.remove();
|
||||
|
|
@ -77,7 +77,7 @@ Modal.newInstance = properties => {
|
|||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.visible = false;
|
||||
this.$children[0].visible = false;
|
||||
this.remove();
|
||||
}
|
||||
this.onOk();
|
||||
|
|
@ -89,7 +89,7 @@ Modal.newInstance = properties => {
|
|||
},
|
||||
destroy () {
|
||||
this.$destroy();
|
||||
document.body.removeChild(div);
|
||||
document.body.removeChild(this.$el);
|
||||
this.onRemove();
|
||||
},
|
||||
onOk () {},
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import InputNumber from './components/input-number';
|
|||
import LoadingBar from './components/loading-bar';
|
||||
import Menu from './components/menu';
|
||||
// import Message from './components/message';
|
||||
// import Modal from './components/modal';
|
||||
import Modal from './components/modal';
|
||||
// import Notice from './components/notice';
|
||||
import Page from './components/page';
|
||||
import Poptip from './components/poptip';
|
||||
|
|
@ -81,7 +81,7 @@ const iview = {
|
|||
MenuItem: Menu.Item,
|
||||
Submenu: Menu.Sub,
|
||||
// Message,
|
||||
// Modal,
|
||||
Modal,
|
||||
// Notice,
|
||||
iOption: Option,
|
||||
OptionGroup,
|
||||
|
|
@ -123,7 +123,7 @@ const install = function (Vue, opts = {}) {
|
|||
|
||||
Vue.prototype.$Loading = LoadingBar;
|
||||
// Vue.prototype.$Message = Message;
|
||||
// Vue.prototype.$Modal = Modal;
|
||||
Vue.prototype.$Modal = Modal;
|
||||
// Vue.prototype.$Notice = Notice;
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue