iview/src/components/modal/modal.vue

395 lines
13 KiB
Vue
Raw Normal View History

<template>
<div v-transfer-dom :data-transfer="transfer">
2017-03-31 09:26:59 +08:00
<transition :name="transitionNames[1]">
2018-09-10 11:41:47 +08:00
<div :class="maskClasses" :style="wrapStyles" v-show="visible" v-if="showMask" @click="handleMask"></div>
2017-03-09 18:31:47 +08:00
</transition>
<div :class="wrapClasses" :style="wrapStyles" @click="handleWrapClick">
2017-06-28 10:55:00 +08:00
<transition :name="transitionNames[0]" @after-leave="animationFinish">
2017-03-09 18:31:47 +08:00
<div :class="classes" :style="mainStyles" v-show="visible">
<div :class="contentClasses" ref="content" :style="contentStyles" @click="handleClickModal">
2017-03-09 18:31:47 +08:00
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
<slot name="close">
2018-06-25 21:11:42 +08:00
<Icon type="ios-close"></Icon>
2017-03-09 18:31:47 +08:00
</slot>
</a>
2018-06-26 20:51:59 +08:00
<div :class="[prefixCls + '-header']"
@mousedown="handleMoveStart"
v-if="showHead"
><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
2017-03-09 18:31:47 +08:00
<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>
2017-03-09 18:31:47 +08:00
</slot>
</div>
</div>
</div>
2017-03-09 18:31:47 +08:00
</transition>
</div>
2017-04-05 11:24:00 +08:00
</div>
</template>
<script>
import Icon from '../icon';
2016-10-28 18:27:04 +08:00
import iButton from '../button/button.vue';
2017-04-05 11:24:00 +08:00
import TransferDom from '../../directives/transfer-dom';
import Locale from '../../mixins/locale';
2017-04-10 09:58:51 +08:00
import Emitter from '../../mixins/emitter';
2017-09-19 14:26:46 +08:00
import ScrollbarMixins from './mixins-scrollbar';
2018-06-26 20:51:59 +08:00
import { on, off } from '../../utils/dom';
import { findComponentsDownward } from '../../utils/assist';
import { modalIndex, modalIncrease } from './q';
2018-06-26 20:51:59 +08:00
const prefixCls = 'ivu-modal';
export default {
name: 'Modal',
2017-09-19 14:26:46 +08:00
mixins: [ Locale, Emitter, ScrollbarMixins ],
2016-10-28 18:27:04 +08:00
components: { Icon, iButton },
2017-04-05 11:24:00 +08:00
directives: { TransferDom },
props: {
2017-03-09 18:31:47 +08:00
value: {
type: Boolean,
default: false
},
closable: {
type: Boolean,
default: true
},
maskClosable: {
type: Boolean,
default: true
},
title: {
type: String
},
width: {
type: [Number, String],
default: 520
},
okText: {
type: String
},
cancelText: {
type: String
},
loading: {
type: Boolean,
default: false
},
2017-03-09 18:31:47 +08:00
styles: {
type: Object
},
className: {
type: String
},
// for instance
footerHide: {
type: Boolean,
default: false
},
2017-02-05 22:58:34 -06:00
scrollable: {
type: Boolean,
default: false
2017-03-31 09:26:59 +08:00
},
transitionNames: {
type: Array,
default () {
return ['ease', 'fade'];
}
},
transfer: {
type: Boolean,
2018-06-28 14:58:38 +08:00
default () {
2018-08-07 16:35:27 +08:00
return !this.$IVIEW || this.$IVIEW.transfer === '' ? true : this.$IVIEW.transfer;
2018-06-28 14:58:38 +08:00
}
2018-06-26 18:46:20 +08:00
},
fullscreen: {
type: Boolean,
default: false
2018-06-26 19:14:52 +08:00
},
mask: {
type: Boolean,
default: true
},
2018-07-14 18:31:22 +08:00
draggable: {
2018-06-26 19:14:52 +08:00
type: Boolean,
default: false
},
zIndex: {
type: Number,
default: 1000
},
},
data () {
return {
prefixCls: prefixCls,
wrapShow: false,
showHead: true,
2017-03-09 18:31:47 +08:00
buttonLoading: false,
2018-06-26 20:51:59 +08:00
visible: this.value,
dragData: {
x: null,
y: null,
dragX: null,
dragY: null,
dragging: false
},
modalIndex: this.handleGetModalIndex(), // for Esc close the top modal
2016-12-25 22:49:42 +08:00
};
},
computed: {
wrapClasses () {
return [
`${prefixCls}-wrap`,
{
[`${prefixCls}-hidden`]: !this.wrapShow,
2018-06-26 19:14:52 +08:00
[`${this.className}`]: !!this.className,
[`${prefixCls}-no-mask`]: !this.showMask
}
2016-12-25 22:49:42 +08:00
];
},
wrapStyles () {
return {
zIndex: this.modalIndex + this.zIndex
};
},
maskClasses () {
return `${prefixCls}-mask`;
},
classes () {
2018-06-26 18:46:20 +08:00
return [
`${prefixCls}`,
{
[`${prefixCls}-fullscreen`]: this.fullscreen,
[`${prefixCls}-fullscreen-no-header`]: this.fullscreen && !this.showHead,
[`${prefixCls}-fullscreen-no-footer`]: this.fullscreen && this.footerHide
2018-06-26 19:14:52 +08:00
}
];
},
contentClasses () {
return [
`${prefixCls}-content`,
{
2018-06-26 20:51:59 +08:00
[`${prefixCls}-content-no-mask`]: !this.showMask,
2018-07-14 18:31:22 +08:00
[`${prefixCls}-content-drag`]: this.draggable,
[`${prefixCls}-content-dragging`]: this.draggable && this.dragData.dragging
2018-06-26 18:46:20 +08:00
}
];
},
2017-03-09 18:31:47 +08:00
mainStyles () {
let style = {};
2017-07-18 10:24:21 +08:00
const width = parseInt(this.width);
2018-06-26 20:51:59 +08:00
const styleWidth = this.dragData.x !== null ? {
top: 0
} : {
2017-07-18 10:24:21 +08:00
width: width <= 100 ? `${width}%` : `${width}px`
};
2017-03-09 18:31:47 +08:00
const customStyle = this.styles ? this.styles : {};
Object.assign(style, styleWidth, customStyle);
return style;
},
2018-06-26 20:51:59 +08:00
contentStyles () {
let style = {};
2018-07-14 18:31:22 +08:00
if (this.draggable) {
2018-06-26 20:51:59 +08:00
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;
}
2018-06-26 19:14:52 +08:00
},
showMask () {
2018-07-14 18:31:22 +08:00
return this.draggable ? false : this.mask;
}
},
methods: {
close () {
this.visible = false;
2017-03-09 18:31:47 +08:00
this.$emit('input', false);
this.$emit('on-cancel');
},
2018-06-26 19:14:52 +08:00
handleMask () {
if (this.maskClosable && this.showMask) {
this.close();
}
},
handleWrapClick (event) {
// use indexOf,do not use === ,because ivu-modal-wrap can have other custom className
2017-02-22 14:39:54 +08:00
const className = event.target.getAttribute('class');
2018-06-26 19:14:52 +08:00
if (className && className.indexOf(`${prefixCls}-wrap`) > -1) this.handleMask();
},
cancel () {
this.close();
},
ok () {
if (this.loading) {
this.buttonLoading = true;
} else {
this.visible = false;
2017-03-09 18:31:47 +08:00
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);
}
}
},
2017-06-28 10:55:00 +08:00
animationFinish() {
this.$emit('on-hidden');
2018-06-26 20:51:59 +08:00
},
handleMoveStart (event) {
2018-07-14 18:31:22 +08:00
if (!this.draggable) return false;
2018-06-26 20:51:59 +08:00
const $content = this.$refs.content;
const rect = $content.getBoundingClientRect();
this.dragData.x = rect.x;
this.dragData.y = rect.y;
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;
},
2018-06-26 20:55:25 +08:00
handleMoveEnd () {
2018-06-26 20:51:59 +08:00
this.dragData.dragging = false;
off(window, 'mousemove', this.handleMoveMove);
off(window, 'mouseup', this.handleMoveEnd);
},
handleGetModalIndex () {
modalIncrease();
return modalIndex;
},
handleClickModal () {
this.modalIndex = this.handleGetModalIndex();
}
},
2017-03-09 18:31:47 +08:00
mounted () {
if (this.visible) {
this.wrapShow = true;
}
let showHead = true;
2017-03-15 11:32:12 +08:00
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: {
2017-03-09 18:31:47 +08:00
value (val) {
this.visible = val;
},
visible (val) {
if (val === false) {
this.buttonLoading = false;
2017-01-13 15:35:38 +08:00
this.timer = setTimeout(() => {
this.wrapShow = false;
2016-11-21 09:14:38 +08:00
this.removeScrollEffect();
}, 300);
} else {
this.modalIndex = this.handleGetModalIndex();
2017-01-13 15:35:38 +08:00
if (this.timer) clearTimeout(this.timer);
this.wrapShow = true;
2017-02-05 22:58:34 -06:00
if (!this.scrollable) {
this.addScrollEffect();
}
}
2017-04-10 09:58:51 +08:00
this.broadcast('Table', 'on-visible-change', val);
2018-01-23 18:14:23 +08:00
this.broadcast('Slider', 'on-visible-change', val); // #2852
this.$emit('on-visible-change', val);
},
loading (val) {
if (!val) {
this.buttonLoading = false;
}
},
2017-02-05 22:58:34 -06:00
scrollable (val) {
2017-01-24 13:37:35 -06:00
if (!val) {
this.addScrollEffect();
} else {
this.removeScrollEffect();
}
},
title (val) {
if (this.$slots.header === undefined) {
2017-04-25 14:08:01 +08:00
this.showHead = !!val;
}
}
}
2016-12-25 22:49:42 +08:00
};
2016-10-28 17:24:52 +08:00
</script>