add a dialog to fixed $Modal can not use temporarily
add a dialog to fixed $Modal can not use temporarily
This commit is contained in:
梁灏
parent
eaaea36a03
commit
c571d9ec2b
8 changed files with 489 additions and 127 deletions
169
src/components/dialog/confirm.js
Normal file
169
src/components/dialog/confirm.js
Normal file
|
|
@ -0,0 +1,169 @@
|
|||
import Vue from 'vue';
|
||||
import Modal from './dialog.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import iButton from '../button/button.vue';
|
||||
import { camelcaseToHyphen } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-modal-confirm';
|
||||
|
||||
Modal.newInstance = properties => {
|
||||
const _props = properties || {};
|
||||
|
||||
let props = '';
|
||||
Object.keys(_props).forEach(prop => {
|
||||
props += ' :' + camelcaseToHyphen(prop) + '=' + prop;
|
||||
});
|
||||
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `
|
||||
<Modal${props} :visible.sync="visible" :width="width">
|
||||
<div class="${prefixCls}">
|
||||
<div class="${prefixCls}-head">
|
||||
<div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
|
||||
<div class="${prefixCls}-head-title">{{{ title }}}</div>
|
||||
</div>
|
||||
<div class="${prefixCls}-body">
|
||||
{{{ body }}}
|
||||
</div>
|
||||
<div class="${prefixCls}-footer">
|
||||
<i-button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
`;
|
||||
document.body.appendChild(div);
|
||||
|
||||
const modal = new Vue({
|
||||
el: div,
|
||||
components: { Modal, iButton, Icon },
|
||||
data: Object.assign(_props, {
|
||||
visible: false,
|
||||
width: 416,
|
||||
title: '',
|
||||
body: '',
|
||||
iconType: '',
|
||||
iconName: '',
|
||||
okText: '确定',
|
||||
cancelText: '取消',
|
||||
showCancel: false,
|
||||
loading: false,
|
||||
buttonLoading: false
|
||||
}),
|
||||
computed: {
|
||||
iconTypeCls () {
|
||||
return [
|
||||
`${prefixCls}-head-icon`,
|
||||
`${prefixCls}-head-icon-${this.iconType}`
|
||||
]
|
||||
},
|
||||
iconNameCls () {
|
||||
return [
|
||||
'ivu-icon',
|
||||
`ivu-icon-${this.iconName}`
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancel () {
|
||||
this.visible = false;
|
||||
this.buttonLoading = false;
|
||||
this.onCancel();
|
||||
this.remove();
|
||||
},
|
||||
ok () {
|
||||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.visible = false;
|
||||
this.remove();
|
||||
}
|
||||
this.onOk();
|
||||
},
|
||||
remove () {
|
||||
setTimeout(() => {
|
||||
this.destroy();
|
||||
}, 300);
|
||||
},
|
||||
destroy () {
|
||||
this.$destroy();
|
||||
document.body.removeChild(div);
|
||||
this.onRemove();
|
||||
},
|
||||
onOk () {},
|
||||
onCancel () {},
|
||||
onRemove () {}
|
||||
}
|
||||
}).$children[0];
|
||||
|
||||
return {
|
||||
show (props) {
|
||||
modal.$parent.showCancel = props.showCancel;
|
||||
modal.$parent.iconType = props.icon;
|
||||
|
||||
switch (props.icon) {
|
||||
case 'info':
|
||||
modal.$parent.iconName = 'information-circled';
|
||||
break;
|
||||
case 'success':
|
||||
modal.$parent.iconName = 'checkmark-circled';
|
||||
break;
|
||||
case 'warning':
|
||||
modal.$parent.iconName = 'android-alert';
|
||||
break;
|
||||
case 'error':
|
||||
modal.$parent.iconName = 'close-circled';
|
||||
break;
|
||||
case 'confirm':
|
||||
modal.$parent.iconName = 'help-circled';
|
||||
break;
|
||||
}
|
||||
|
||||
if ('width' in props) {
|
||||
modal.$parent.width = props.width;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
// 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;
|
||||
210
src/components/dialog/dialog.vue
Normal file
210
src/components/dialog/dialog.vue
Normal file
|
|
@ -0,0 +1,210 @@
|
|||
<template>
|
||||
<div :class="wrapClasses">
|
||||
<div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
|
||||
<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="ghost" size="large" @click="cancel">{{ cancelText }}</i-button>
|
||||
<i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import iButton from '../button/button.vue';
|
||||
import { getScrollBarSize } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-modal';
|
||||
|
||||
export default {
|
||||
components: { Icon, iButton },
|
||||
props: {
|
||||
visible: {
|
||||
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,
|
||||
default: '确定'
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '取消'
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
style: {
|
||||
type: Object
|
||||
},
|
||||
className: {
|
||||
type: String
|
||||
},
|
||||
// for instance
|
||||
footerHide: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
wrapShow: false,
|
||||
showHead: true,
|
||||
buttonLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
wrapClasses () {
|
||||
return [
|
||||
`${prefixCls}-wrap`,
|
||||
{
|
||||
[`${prefixCls}-hidden`]: !this.wrapShow,
|
||||
[`${this.className}`]: !!this.className
|
||||
}
|
||||
]
|
||||
},
|
||||
maskClasses () {
|
||||
return `${prefixCls}-mask`;
|
||||
},
|
||||
classes () {
|
||||
return `${prefixCls}`;
|
||||
},
|
||||
styles () {
|
||||
let style = {};
|
||||
|
||||
const styleWidth = {
|
||||
width: `${this.width}px`
|
||||
};
|
||||
|
||||
const customStyle = !!this.style ? this.style : {};
|
||||
|
||||
Object.assign(style, styleWidth, customStyle);
|
||||
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
close () {
|
||||
this.visible = false;
|
||||
this.$emit('on-cancel');
|
||||
},
|
||||
mask () {
|
||||
if (this.maskClosable) {
|
||||
this.close();
|
||||
}
|
||||
},
|
||||
cancel () {
|
||||
this.close();
|
||||
},
|
||||
ok () {
|
||||
if (this.loading) {
|
||||
this.buttonLoading = true;
|
||||
} else {
|
||||
this.visible = false;
|
||||
}
|
||||
this.$emit('on-ok');
|
||||
},
|
||||
EscClose (e) {
|
||||
if (this.visible && this.closable) {
|
||||
if (e.keyCode === 27) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
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();
|
||||
}
|
||||
},
|
||||
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() {
|
||||
document.body.style.overflow = '';
|
||||
this.resetScrollBar();
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.visible) {
|
||||
this.wrapShow = true;
|
||||
}
|
||||
|
||||
let showHead = true;
|
||||
|
||||
if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
|
||||
showHead = false;
|
||||
}
|
||||
|
||||
this.showHead = showHead;
|
||||
|
||||
// ESC close
|
||||
document.addEventListener('keydown', this.EscClose);
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.EscClose);
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val === false) {
|
||||
this.buttonLoading = false;
|
||||
setTimeout(() => {
|
||||
this.wrapShow = false;
|
||||
}, 300);
|
||||
this.removeScrollEffect();
|
||||
} else {
|
||||
this.wrapShow = true;
|
||||
this.addScrollEffect();
|
||||
}
|
||||
},
|
||||
loading (val) {
|
||||
if (!val) {
|
||||
this.buttonLoading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
60
src/components/dialog/index.js
Normal file
60
src/components/dialog/index.js
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import Modal from './confirm';
|
||||
|
||||
let modalInstance;
|
||||
|
||||
function getModalInstance () {
|
||||
modalInstance = modalInstance || Modal.newInstance({
|
||||
closable: false,
|
||||
maskClosable: false,
|
||||
footerHide: true
|
||||
});
|
||||
|
||||
return modalInstance;
|
||||
}
|
||||
|
||||
function confirm (options) {
|
||||
let instance = getModalInstance();
|
||||
|
||||
options.onRemove = function () {
|
||||
modalInstance = null;
|
||||
};
|
||||
|
||||
instance.show(options);
|
||||
}
|
||||
|
||||
export default {
|
||||
info (props = {}) {
|
||||
props.icon = 'info';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
},
|
||||
success (props = {}) {
|
||||
props.icon = 'success';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
},
|
||||
warning (props = {}) {
|
||||
props.icon = 'warning';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
},
|
||||
error (props = {}) {
|
||||
props.icon = 'error';
|
||||
props.showCancel = false;
|
||||
return confirm(props);
|
||||
},
|
||||
confirm (props = {}) {
|
||||
props.icon = 'confirm';
|
||||
props.showCancel = true;
|
||||
return confirm(props);
|
||||
},
|
||||
remove () {
|
||||
if (!modalInstance) { // at loading status, remove after Cancel
|
||||
return false;
|
||||
}
|
||||
|
||||
const instance = getModalInstance();
|
||||
|
||||
instance.remove();
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,7 @@ import Card from './components/card';
|
|||
import Checkbox from './components/checkbox';
|
||||
import Circle from './components/circle';
|
||||
import Collapse from './components/collapse';
|
||||
import Dialog from './components/dialog';
|
||||
import Icon from './components/icon';
|
||||
import Input from './components/input';
|
||||
import InputNumber from './components/input-number';
|
||||
|
|
@ -79,7 +80,7 @@ const install = function (Vue) {
|
|||
|
||||
Vue.prototype.$Loading = LoadingBar;
|
||||
Vue.prototype.$Message = Message;
|
||||
Vue.prototype.$Modal = Modal;
|
||||
Vue.prototype.$Modal = Dialog;
|
||||
Vue.prototype.$Notice = Notice;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@
|
|||
right: 8px;
|
||||
line-height: 1;
|
||||
margin-top: -6px;
|
||||
color: @border-color-base;
|
||||
color: @subsidiary-color;
|
||||
.transition(all @transition-time @ease-in-out);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import App from './app.vue';
|
||||
import iView from '../src/index';
|
||||
|
||||
Vue.use(VueRouter);
|
||||
Vue.use(iView);
|
||||
|
||||
// 开启debug模式
|
||||
Vue.config.debug = true;
|
||||
|
|
|
|||
|
|
@ -1,124 +1,42 @@
|
|||
<template>
|
||||
<i-button @click="mInfo">m信息</i-button>
|
||||
<i-button @click="open">打开</i-button>
|
||||
<i-button @click="info2">消息2</i-button>
|
||||
<i-button @click="info">消息</i-button>
|
||||
<i-button @click="success">成功</i-button>
|
||||
<i-button @click="warning">警告</i-button>
|
||||
<i-button @click="error">错误</i-button>
|
||||
<i-button @click="modal1 = true"></i-button>
|
||||
<Modal
|
||||
:visible.sync="modal1"
|
||||
title="普通的Modal对话框标题">
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
<p>对话框内容</p>
|
||||
</Modal>
|
||||
<i-button @click="instance('info')">消息</i-button>
|
||||
<i-button @click="instance('success')">成功</i-button>
|
||||
<i-button @click="instance('warning')">警告</i-button>
|
||||
<i-button @click="instance('error')">错误</i-button>
|
||||
</template>
|
||||
<script>
|
||||
import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Message,
|
||||
iButton,
|
||||
Alert,
|
||||
Card,
|
||||
Notice,
|
||||
iButton,
|
||||
Modal
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
modal1: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
methods: {
|
||||
open () {
|
||||
Notice.open({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
})
|
||||
},
|
||||
info () {
|
||||
Notice.info({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
// desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
|
||||
});
|
||||
},
|
||||
info2 () {
|
||||
Notice.open({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
|
||||
});
|
||||
Notice.info({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
|
||||
});
|
||||
Notice.open({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.info({
|
||||
duration: 1000,
|
||||
title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.success({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.warning({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
Notice.error({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
success () {
|
||||
Notice.success({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
warning () {
|
||||
Notice.warning({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
error () {
|
||||
Notice.error({
|
||||
duration: 1000,
|
||||
title: '这是通知标题',
|
||||
desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
|
||||
});
|
||||
},
|
||||
mInfo () {
|
||||
Message.info('飞机飞士大夫', 1000);
|
||||
instance (type) {
|
||||
const title = '对话框的标题';
|
||||
const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
|
||||
switch (type) {
|
||||
case 'info':
|
||||
this.$Modal.info({
|
||||
title: title,
|
||||
content: content
|
||||
});
|
||||
break;
|
||||
case 'success':
|
||||
this.$Modal.success({
|
||||
title: title,
|
||||
content: content
|
||||
});
|
||||
break;
|
||||
case 'warning':
|
||||
this.$Modal.warning({
|
||||
title: title,
|
||||
content: content
|
||||
});
|
||||
break;
|
||||
case 'error':
|
||||
this.$Modal.error({
|
||||
title: title,
|
||||
content: content
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
// Message.config({
|
||||
// top: 50,
|
||||
// duration: 8
|
||||
// });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,17 +1,19 @@
|
|||
<template>
|
||||
<div style="width: 400px;margin:100px;">
|
||||
{{ value }}
|
||||
<Slider @on-change="change" :step="15"></Slider>
|
||||
<Slider :value="40" :tip-format="format"></Slider>
|
||||
<Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
|
||||
<div style="width: 140px;margin:100px;">
|
||||
<!--{{ value }}-->
|
||||
<!--<Slider @on-change="change" :step="15"></Slider>-->
|
||||
<!--<Slider :value="40" :tip-format="format"></Slider>-->
|
||||
<!--<Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>-->
|
||||
<!--<Slider :max="10"></Slider>-->
|
||||
<!--<Slider :step="13"></Slider>-->
|
||||
<!--<Slider :step="13" :max="60"></Slider>-->
|
||||
<Icon type="checkmark-circled" size="40" color="#f60"></Icon>
|
||||
<p>附近的首付款是东方红看就是</p>
|
||||
<div class="ivu-article">
|
||||
<a href="http://www.iviewui.com" target="_blank">iView</a>
|
||||
</div>
|
||||
<!--<Icon type="checkmark-circled" size="40" color="#f60"></Icon>-->
|
||||
<!--<p>附近的首付款是东方红看就是</p>-->
|
||||
<!--<div class="ivu-article">-->
|
||||
<!--<a href="http://www.iviewui.com" target="_blank">iView</a>-->
|
||||
<!--</div>-->
|
||||
<Slider :value="75"></Slider>
|
||||
<!--<Slider :value="[20, 50]" range></Slider>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue