ant-design-vue/components/modal/demo/async.md

56 lines
1.2 KiB
Markdown
Raw Normal View History

2018-03-07 13:36:15 +00:00
<cn>
#### 异步关闭
点击确定后异步关闭对话框,例如提交表单。
</cn>
<us>
#### Asynchronously close
Asynchronously close a modal dialog when a user clicked OK button, for example,
you can use this pattern when you submit a form.
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-03-07 13:36:15 +00:00
<template>
<div>
<a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
2018-03-07 13:36:15 +00:00
<a-modal
title="Title"
:visible="visible"
@ok="handleOk"
:confirmLoading="confirmLoading"
@cancel="handleCancel"
>
<p>{{ModalText}}</p>
</a-modal>
</div>
</template>
<script>
2019-09-28 12:45:07 +00:00
export default {
data() {
return {
ModalText: 'Content of the modal',
visible: false,
confirmLoading: false,
};
2018-03-07 13:36:15 +00:00
},
2019-09-28 12:45:07 +00:00
methods: {
showModal() {
this.visible = true;
},
handleOk(e) {
this.ModalText = 'The modal will be closed after two seconds';
this.confirmLoading = true;
setTimeout(() => {
this.visible = false;
this.confirmLoading = false;
}, 2000);
},
handleCancel(e) {
console.log('Clicked cancel button');
2018-03-07 13:36:15 +00:00
this.visible = false;
2019-09-28 12:45:07 +00:00
},
2018-03-07 13:36:15 +00:00
},
2019-09-28 12:45:07 +00:00
};
2018-03-07 13:36:15 +00:00
</script>
```