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

41 lines
904 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>
```html
<template>
<a-button @click="countDown">Open modal to close in 5s</a-button>
2018-03-07 13:36:15 +00:00
</template>
<script>
export default {
methods: {
countDown() {
let secondsToGo = 5;
2018-04-08 13:17:20 +00:00
const modal = this.$success({
2018-03-07 13:36:15 +00:00
title: 'This is a notification message',
content: `This modal will be destroyed after ${secondsToGo} second.`,
2018-03-07 13:36:15 +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>
```