update the master branch to the latest
This commit is contained in:
梁灏
parent
67d534df27
commit
23a0ba9831
611 changed files with 122648 additions and 0 deletions
278
src/components/modal/confirm.js
Normal file
278
src/components/modal/confirm.js
Normal file
|
|
@ -0,0 +1,278 @@
|
|||
import Vue from 'vue';
|
||||
import Modal from './modal.vue';
|
||||
import Button from '../button/button.vue';
|
||||
import Locale from '../../mixins/locale';
|
||||
|
||||
const prefixCls = 'ivu-modal-confirm';
|
||||
|
||||
Modal.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
const Instance = new Vue({
|
||||
mixins: [ Locale ],
|
||||
data: Object.assign({}, _props, {
|
||||
visible: false,
|
||||
width: 416,
|
||||
title: '',
|
||||
body: '',
|
||||
iconType: '',
|
||||
iconName: '',
|
||||
okText: undefined,
|
||||
cancelText: undefined,
|
||||
showCancel: false,
|
||||
loading: false,
|
||||
buttonLoading: false,
|
||||
scrollable: false,
|
||||
closable: false,
|
||||
closing: false // 关闭有动画，期间使用此属性避免重复点击
|
||||
}),
|
||||
render (h) {
|
||||
let footerVNodes = [];
|
||||
if (this.showCancel) {
|
||||
footerVNodes.push(h(Button, {
|
||||
props: {
|
||||
type: 'text',
|
||||
size: 'large'
|
||||
},
|
||||
on: {
|
||||
click: this.cancel
|
||||
}
|
||||
}, this.localeCancelText));
|
||||
}
|
||||
footerVNodes.push(h(Button, {
|
||||
props: {
|
||||
type: 'primary',
|
||||
size: 'large',
|
||||
loading: this.buttonLoading
|
||||
},
|
||||
on: {
|
||||
click: this.ok
|
||||
}
|
||||
}, this.localeOkText));
|
||||
|
||||
// render content
|
||||
let body_render;
|
||||
if (this.render) {
|
||||
body_render = h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-body ${prefixCls}-body-render`
|
||||
}
|
||||
}, [this.render(h)]);
|
||||
} else {
|
||||
body_render = h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-body`
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
domProps: {
|
||||
innerHTML: this.body
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
|
||||
// when render with no title, hide head
|
||||
let head_render;
|
||||
if (this.title) {
|
||||
head_render = h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-head`
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
class: this.iconTypeCls
|
||||
}, [
|
||||
h('i', {
|
||||
class: this.iconNameCls
|
||||
})
|
||||
]),
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-head-title`
|
||||
},
|
||||
domProps: {
|
||||
innerHTML: this.title
|
||||
}
|
||||
})
|
||||
]);
|
||||
}
|
||||
|
||||
return h(Modal, {
|
||||
props: Object.assign({}, _props, {
|
||||
width: this.width,
|
||||
scrollable: this.scrollable,
|
||||
closable: this.closable
|
||||
}),
|
||||
domProps: {
|
||||
value: this.visible
|
||||
},
|
||||
on: {
|
||||
input: (status) => {
|
||||
this.visible = status;
|
||||
},
|
||||
'on-cancel': this.cancel
|
||||
}
|
||||
}, [
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: prefixCls
|
||||
}
|
||||
}, [
|
||||
head_render,
|
||||
body_render,
|
||||
h('div', {
|
||||
attrs: {
|
||||
class: `${prefixCls}-footer`
|
||||
}
|
||||
}, footerVNodes)
|
||||
])
|
||||
]);
|
||||
},
|
||||
computed: {
|
||||
iconTypeCls () {
|
||||
return [
|
||||
`${prefixCls}-head-icon`,
|
||||
`${prefixCls}-head-icon-${this.iconType}`
|
||||
];
|
||||
},
|
||||
iconNameCls () {
|
||||
return [
|
||||
'ivu-icon',
|
||||
`ivu-icon-${this.iconName}`
|
||||
];
|
||||
},
|
||||
localeOkText () {
|
||||
if (this.okText) {
|
||||
return this.okText;
|
||||
} else {
|
||||
return this.t('i.modal.okText');
|
||||
}
|
||||
},
|
||||
localeCancelText () {
|
||||
if (this.cancelText) {
|
||||
return this.cancelText;
|
||||
} else {
|
||||
return this.t('i.modal.cancelText');
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel () {
|
||||
if (this.closing) return;
|
||||
this.$children[0].visible = false;
|
||||
this.buttonLoading = false;
|
||||
this.onCancel();
|
||||
this.remove();
|
||||
},
|
||||
ok () {
|
||||
if (this.closing) return;
|
||||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.$children[0].visible = false;
|
||||
this.remove();
|
||||
}
|
||||
this.onOk();
|
||||
},
|
||||
remove () {
|
||||
this.closing = true;
|
||||
setTimeout(() => {
|
||||
this.closing = false;
|
||||
this.destroy();
|
||||
}, 300);
|
||||
},
|
||||
destroy () {
|
||||
this.$destroy();
|
||||
document.body.removeChild(this.$el);
|
||||
this.onRemove();
|
||||
},
|
||||
onOk () {},
|
||||
onCancel () {},
|
||||
onRemove () {}
|
||||
}
|
||||
});
|
||||
|
||||
const component = Instance.$mount();
|
||||
document.body.appendChild(component.$el);
|
||||
const modal = Instance.$children[0];
|
||||
|
||||
return {
|
||||
show (props) {
|
||||
modal.$parent.showCancel = props.showCancel;
|
||||
modal.$parent.iconType = props.icon;
|
||||
|
||||
switch (props.icon) {
|
||||
case 'info':
|
||||
modal.$parent.iconName = 'ios-information-circle';
|
||||
break;
|
||||
case 'success':
|
||||
modal.$parent.iconName = 'ios-checkmark-circle';
|
||||
break;
|
||||
case 'warning':
|
||||
modal.$parent.iconName = 'ios-alert';
|
||||
break;
|
||||
case 'error':
|
||||
modal.$parent.iconName = 'ios-close-circle';
|
||||
break;
|
||||
case 'confirm':
|
||||
modal.$parent.iconName = 'ios-help-circle';
|
||||
break;
|
||||
}
|
||||
|
||||
if ('width' in props) {
|
||||
modal.$parent.width = props.width;
|
||||
}
|
||||
|
||||
if ('closable' in props) {
|
||||
modal.$parent.closable = props.closable;
|
||||
}
|
||||
|
||||
if ('title' in props) {
|
||||
modal.$parent.title = props.title;
|
||||
}
|
||||
|
||||
if ('content' in props) {
|
||||
modal.$parent.body = props.content;
|
||||
}
|
||||
|
||||
if ('okText' in props) {
|
||||
modal.$parent.okText = props.okText;
|
||||
}
|
||||
|
||||
if ('cancelText' in props) {
|
||||
modal.$parent.cancelText = props.cancelText;
|
||||
}
|
||||
|
||||
if ('onCancel' in props) {
|
||||
modal.$parent.onCancel = props.onCancel;
|
||||
}
|
||||
|
||||
if ('onOk' in props) {
|
||||
modal.$parent.onOk = props.onOk;
|
||||
}
|
||||
|
||||
// async for ok
|
||||
if ('loading' in props) {
|
||||
modal.$parent.loading = props.loading;
|
||||
}
|
||||
|
||||
if ('scrollable' in props) {
|
||||
modal.$parent.scrollable = props.scrollable;
|
||||
}
|
||||
|
||||
// notice when component destroy
|
||||
modal.$parent.onRemove = props.onRemove;
|
||||
|
||||
modal.visible = true;
|
||||
},
|
||||
remove () {
|
||||
modal.visible = false;
|
||||
modal.$parent.buttonLoading = false;
|
||||
modal.$parent.remove();
|
||||
},
|
||||
component: modal
|
||||
};
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
67
src/components/modal/index.js
Normal file
67
src/components/modal/index.js
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import Modal from './confirm';
|
||||
|
||||
let modalInstance;
|
||||
|
||||
function getModalInstance (render = undefined) {
|
||||
modalInstance = modalInstance || Modal.newInstance({
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
footerHide: true,
|
||||
render: render
|
||||
});
|
||||
|
||||
return modalInstance;
|
||||
}
|
||||
|
||||
function confirm (options) {
|
||||
const render = ('render' in options) ? options.render : undefined;
|
||||
let instance = getModalInstance(render);
|
||||
|
||||
options.onRemove = function () {
|
||||
modalInstance = null;
|
||||
};
|
||||
|
||||
instance.show(options);
|
||||
}
|
||||
|
||||
Modal.info = function (props = {}) {
|
||||
props.icon = 'info';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.success = function (props = {}) {
|
||||
props.icon = 'success';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.warning = function (props = {}) {
|
||||
props.icon = 'warning';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.error = function (props = {}) {
|
||||
props.icon = 'error';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.confirm = function (props = {}) {
|
||||
props.icon = 'confirm';
|
||||
props.showCancel = true;
|
||||
return confirm(props);
|
||||
};
|
||||
|
||||
Modal.remove = function () {
|
||||
if (!modalInstance) { // at loading status, remove after Cancel
|
||||
return false;
|
||||
}
|
||||
|
||||
const instance = getModalInstance();
|
||||
|
||||
instance.remove();
|
||||
};
|
||||
|
||||
export default Modal;
|
||||
40
src/components/modal/mixins-scrollbar.js
Normal file
40
src/components/modal/mixins-scrollbar.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
// used for Modal & $Spin & Drawer
|
||||
import { getScrollBarSize } from '../../utils/assist';
|
||||
export default {
|
||||
methods: {
|
||||
checkScrollBar () {
|
||||
let fullWindowWidth = window.innerWidth;
|
||||
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
|
||||
const documentElementRect = document.documentElement.getBoundingClientRect();
|
||||
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
|
||||
}
|
||||
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
|
||||
if (this.bodyIsOverflowing) {
|
||||
this.scrollBarWidth = getScrollBarSize();
|
||||
}
|
||||
},
|
||||
checkMaskInVisible () {
|
||||
let masks = document.getElementsByClassName('ivu-modal-mask') || [];
|
||||
return Array.from(masks).every(m => m.style.display === 'none' || m.classList.contains('fade-leave-to'));
|
||||
},
|
||||
setScrollBar () {
|
||||
if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
|
||||
document.body.style.paddingRight = `${this.scrollBarWidth}px`;
|
||||
}
|
||||
},
|
||||
resetScrollBar () {
|
||||
document.body.style.paddingRight = '';
|
||||
},
|
||||
addScrollEffect () {
|
||||
this.checkScrollBar();
|
||||
this.setScrollBar();
|
||||
document.body.style.overflow = 'hidden';
|
||||
},
|
||||
removeScrollEffect() {
|
||||
if (this.checkMaskInVisible()) {
|
||||
document.body.style.overflow = '';
|
||||
this.resetScrollBar();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
406
src/components/modal/modal.vue
Normal file
406
src/components/modal/modal.vue
Normal file
|
|
@ -0,0 +1,406 @@
|
|||
<template>
|
||||
<div v-transfer-dom :data-transfer="transfer">
|
||||
<transition :name="transitionNames[1]">
|
||||
<div :class="maskClasses" :style="wrapStyles" v-show="visible" v-if="showMask" @click="handleMask"></div>
|
||||
</transition>
|
||||
<div :class="wrapClasses" :style="wrapStyles" @click="handleWrapClick">
|
||||
<transition :name="transitionNames[0]" @after-leave="animationFinish">
|
||||
<div :class="classes" :style="mainStyles" v-show="visible" @mousedown="handleMousedown">
|
||||
<div :class="contentClasses" ref="content" :style="contentStyles" @click="handleClickModal">
|
||||
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
|
||||
<slot name="close">
|
||||
<Icon type="ios-close"></Icon>
|
||||
</slot>
|
||||
</a>
|
||||
<div :class="[prefixCls + '-header']"
|
||||
@mousedown="handleMoveStart"
|
||||
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">{{ localeCancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click.native="ok">{{ localeOkText }}</i-button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import iButton from '../button/button.vue';
|
||||
import TransferDom from '../../directives/transfer-dom';
|
||||
import Locale from '../../mixins/locale';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
import ScrollbarMixins from './mixins-scrollbar';
|
||||
|
||||
import { on, off } from '../../utils/dom';
|
||||
import { findComponentsDownward } from '../../utils/assist';
|
||||
|
||||
import { transferIndex as modalIndex, transferIncrease as modalIncrease } from '../../utils/transfer-queue';
|
||||
|
||||
const prefixCls = 'ivu-modal';
|
||||
|
||||
export default {
|
||||
name: 'Modal',
|
||||
mixins: [ Locale, Emitter, ScrollbarMixins ],
|
||||
components: { Icon, iButton },
|
||||
directives: { TransferDom },
|
||||
props: {
|
||||
value: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskClosable: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return !this.$IVIEW || this.$IVIEW.modal.maskClosable === '' ? true : this.$IVIEW.modal.maskClosable;
|
||||
}
|
||||
},
|
||||
title: {
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 520
|
||||
},
|
||||
okText: {
|
||||
type: String
|
||||
},
|
||||
cancelText: {
|
||||
type: String
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
// for instance
|
||||
footerHide: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
transitionNames: {
|
||||
type: Array,
|
||||
default () {
|
||||
return ['ease', 'fade'];
|
||||
}
|
||||
},
|
||||
transfer: {
|
||||
type: Boolean,
|
||||
default () {
|
||||
return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
|
||||
}
|
||||
},
|
||||
fullscreen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
mask: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
draggable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 1000
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
wrapShow: false,
|
||||
showHead: true,
|
||||
buttonLoading: false,
|
||||
visible: this.value,
|
||||
dragData: {
|
||||
x: null,
|
||||
y: null,
|
||||
dragX: null,
|
||||
dragY: null,
|
||||
dragging: false
|
||||
},
|
||||
modalIndex: this.handleGetModalIndex(), // for Esc close the top modal
|
||||
isMouseTriggerIn: false, // #5800
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}-wrap`,
|
||||
{
|
||||
[`${prefixCls}-hidden`]: !this.wrapShow,
|
||||
[`${this.className}`]: !!this.className,
|
||||
[`${prefixCls}-no-mask`]: !this.showMask
|
||||
}
|
||||
];
|
||||
},
|
||||
wrapStyles () {
|
||||
return {
|
||||
zIndex: this.modalIndex + this.zIndex
|
||||
};
|
||||
},
|
||||
maskClasses () {
|
||||
return `${prefixCls}-mask`;
|
||||
},
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${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,
|
||||
[`${prefixCls}-content-drag`]: this.draggable,
|
||||
[`${prefixCls}-content-dragging`]: this.draggable && this.dragData.dragging
|
||||
}
|
||||
];
|
||||
},
|
||||
mainStyles () {
|
||||
let style = {};
|
||||
|
||||
const width = parseInt(this.width);
|
||||
const styleWidth = this.dragData.x !== null ? {
|
||||
top: 0
|
||||
} : {
|
||||
width: width <= 100 ? `${width}%` : `${width}px`
|
||||
};
|
||||
|
||||
const customStyle = this.styles ? this.styles : {};
|
||||
|
||||
Object.assign(style, styleWidth, customStyle);
|
||||
|
||||
return style;
|
||||
},
|
||||
contentStyles () {
|
||||
let style = {};
|
||||
|
||||
if (this.draggable) {
|
||||
if (this.dragData.x !== null) style.left = `${this.dragData.x}px`;
|
||||
if (this.dragData.y !== null) style.top = `${this.dragData.y}px`;
|
||||
const width = parseInt(this.width);
|
||||
const styleWidth = {
|
||||
width: width <= 100 ? `${width}%` : `${width}px`
|
||||
};
|
||||
|
||||
Object.assign(style, styleWidth);
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
localeOkText () {
|
||||
if (this.okText === undefined) {
|
||||
return this.t('i.modal.okText');
|
||||
} else {
|
||||
return this.okText;
|
||||
}
|
||||
},
|
||||
localeCancelText () {
|
||||
if (this.cancelText === undefined) {
|
||||
return this.t('i.modal.cancelText');
|
||||
} else {
|
||||
return this.cancelText;
|
||||
}
|
||||
},
|
||||
showMask () {
|
||||
return this.draggable ? false : this.mask;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.visible = false;
|
||||
this.$emit('input', false);
|
||||
this.$emit('on-cancel');
|
||||
},
|
||||
handleMask () {
|
||||
if (this.maskClosable && this.showMask) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
handleWrapClick (event) {
|
||||
if (this.isMouseTriggerIn) {
|
||||
this.isMouseTriggerIn = false;
|
||||
return;
|
||||
}
|
||||
// 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.handleMask();
|
||||
},
|
||||
handleMousedown () {
|
||||
this.isMouseTriggerIn = true;
|
||||
},
|
||||
cancel () {
|
||||
this.close();
|
||||
},
|
||||
ok () {
|
||||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.visible = false;
|
||||
this.$emit('input', false);
|
||||
}
|
||||
this.$emit('on-ok');
|
||||
},
|
||||
EscClose (e) {
|
||||
if (this.visible && this.closable) {
|
||||
if (e.keyCode === 27) {
|
||||
const $Modals = findComponentsDownward(this.$root, 'Modal').filter(item => item.$data.visible && item.$props.closable);
|
||||
|
||||
const $TopModal = $Modals.sort((a, b) => {
|
||||
return a.$data.modalIndex < b.$data.modalIndex ? 1 : -1;
|
||||
})[0];
|
||||
|
||||
setTimeout(() => {
|
||||
$TopModal.close();
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
animationFinish() {
|
||||
this.$emit('on-hidden');
|
||||
},
|
||||
handleMoveStart (event) {
|
||||
if (!this.draggable) return false;
|
||||
|
||||
const $content = this.$refs.content;
|
||||
const rect = $content.getBoundingClientRect();
|
||||
this.dragData.x = rect.x || rect.left;
|
||||
this.dragData.y = rect.y || rect.top;
|
||||
|
||||
const distance = {
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
};
|
||||
|
||||
this.dragData.dragX = distance.x;
|
||||
this.dragData.dragY = distance.y;
|
||||
|
||||
this.dragData.dragging = true;
|
||||
|
||||
on(window, 'mousemove', this.handleMoveMove);
|
||||
on(window, 'mouseup', this.handleMoveEnd);
|
||||
},
|
||||
handleMoveMove (event) {
|
||||
if (!this.dragData.dragging) return false;
|
||||
|
||||
const distance = {
|
||||
x: event.clientX,
|
||||
y: event.clientY
|
||||
};
|
||||
|
||||
const diff_distance = {
|
||||
x: distance.x - this.dragData.dragX,
|
||||
y: distance.y - this.dragData.dragY
|
||||
};
|
||||
|
||||
this.dragData.x += diff_distance.x;
|
||||
this.dragData.y += diff_distance.y;
|
||||
|
||||
this.dragData.dragX = distance.x;
|
||||
this.dragData.dragY = distance.y;
|
||||
},
|
||||
handleMoveEnd () {
|
||||
this.dragData.dragging = false;
|
||||
off(window, 'mousemove', this.handleMoveMove);
|
||||
off(window, 'mouseup', this.handleMoveEnd);
|
||||
},
|
||||
handleGetModalIndex () {
|
||||
modalIncrease();
|
||||
return modalIndex;
|
||||
},
|
||||
handleClickModal () {
|
||||
if (this.draggable) {
|
||||
this.modalIndex = this.handleGetModalIndex();
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.visible) {
|
||||
this.wrapShow = true;
|
||||
}
|
||||
|
||||
let showHead = true;
|
||||
|
||||
if (this.$slots.header === undefined && !this.title) {
|
||||
showHead = false;
|
||||
}
|
||||
|
||||
this.showHead = showHead;
|
||||
|
||||
// ESC close
|
||||
document.addEventListener('keydown', this.EscClose);
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.EscClose);
|
||||
this.removeScrollEffect();
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.visible = val;
|
||||
},
|
||||
visible (val) {
|
||||
if (val === false) {
|
||||
this.buttonLoading = false;
|
||||
this.timer = setTimeout(() => {
|
||||
this.wrapShow = false;
|
||||
this.removeScrollEffect();
|
||||
}, 300);
|
||||
} else {
|
||||
this.modalIndex = this.handleGetModalIndex();
|
||||
|
||||
if (this.timer) clearTimeout(this.timer);
|
||||
this.wrapShow = true;
|
||||
if (!this.scrollable) {
|
||||
this.addScrollEffect();
|
||||
}
|
||||
}
|
||||
this.broadcast('Table', 'on-visible-change', val);
|
||||
this.broadcast('Slider', 'on-visible-change', val); // #2852
|
||||
this.$emit('on-visible-change', val);
|
||||
},
|
||||
loading (val) {
|
||||
if (!val) {
|
||||
this.buttonLoading = false;
|
||||
}
|
||||
},
|
||||
scrollable (val) {
|
||||
if (!val) {
|
||||
this.addScrollEffect();
|
||||
} else {
|
||||
this.removeScrollEffect();
|
||||
}
|
||||
},
|
||||
title (val) {
|
||||
if (this.$slots.header === undefined) {
|
||||
this.showHead = !!val;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue