This commit is contained in:
梁灏 2017-03-31 09:26:59 +08:00
parent c2db4f928c
commit 672a2805ef
2 changed files with 28 additions and 36 deletions

View file

@ -1,45 +1,31 @@
<template>
<div>
<Button @click="confirm">标准</Button>
<Button @click="custom">自定义按钮文字</Button>
<Button @click="async">异步关闭</Button>
<Button type="primary" @click="modal1 = true">显示对话框</Button>
<Modal
v-model="modal1"
title="普通的Modal对话框标题"
:transition-names="['slide-up', 'ease']"
@on-ok="ok"
@on-cancel="cancel">
<p>对话框内容</p>
<p>对话框内容</p>
<p>对话框内容</p>
</Modal>
</div>
</template>
<script>
export default {
data () {
return {
modal1: false
}
},
methods: {
confirm () {
this.$Modal.confirm({
title: '确认对话框标题',
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
onOk: () => {
this.$Message.info('点击了确定');
},
onCancel: () => {
this.$Message.info('点击了取消');
}
});
ok () {
this.$Message.info('点击了确定');
},
custom () {
this.$Modal.confirm({
title: '确认对话框标题',
content: '<p>一些对话框内容</p><p>一些对话框内容</p>',
okText: 'OK',
cancelText: 'Cancel'
});
},
async () {
this.$Modal.confirm({
title: '确认对话框标题',
content: '<p>对话框将在 2秒 后关闭</p>',
loading: true,
onOk: () => {
setTimeout(() => {
this.$Modal.remove();
this.$Message.info('异步关闭了对话框');
}, 2000);
}
});
cancel () {
this.$Message.info('点击了取消');
}
}
}

View file

@ -1,10 +1,10 @@
<template>
<span>
<transition name="fade">
<transition :name="transitionNames[1]">
<div :class="maskClasses" v-show="visible" @click="mask"></div>
</transition>
<div :class="wrapClasses" @click="handleWrapClick">
<transition name="ease">
<transition :name="transitionNames[0]">
<div :class="classes" :style="mainStyles" v-show="visible">
<div :class="[prefixCls + '-content']">
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
@ -82,6 +82,12 @@
scrollable: {
type: Boolean,
default: false
},
transitionNames: {
type: Array,
default () {
return ['ease', 'fade'];
}
}
},
data () {