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

39 lines
948 B
Markdown
Raw Normal View History

2018-03-07 13:36:15 +00:00
<cn>
#### 手动更新和移除
手动更新和关闭 `Modal.method` 方式创建的对话框。
2018-03-07 13:36:15 +00:00
</cn>
<us>
#### Manual to update destroy
Manually updateing and destroying a modal from `Modal.method`.
2018-03-07 13:36:15 +00:00
</us>
2019-10-09 10:32:23 +00:00
```tpl
2018-03-07 13:36:15 +00:00
<template>
<a-button @click="countDown">Open modal to close in 5s</a-button>
2018-03-07 13:36:15 +00:00
</template>
<script>
2019-09-28 12:45:07 +00:00
export default {
methods: {
countDown() {
let secondsToGo = 5;
const modal = this.$success({
title: 'This is a notification message',
content: `This modal will be destroyed after ${secondsToGo} second.`,
});
2019-09-28 12:45:07 +00:00
const interval = setInterval(() => {
secondsToGo -= 1;
modal.update({
content: `This modal will be destroyed after ${secondsToGo} second.`,
});
}, 1000);
setTimeout(() => {
clearInterval(interval);
modal.destroy();
}, secondsToGo * 1000);
},
},
};
2018-03-07 13:36:15 +00:00
</script>
```