naive-ui/demo/documentation/components/dialog/enUS/async.demo.md

44 lines
940 B
Markdown
Raw Normal View History

# Async
Dialog can be async.
```html
<n-button @click="handleClick">
Success
</n-button>
```
2019-10-21 18:20:00 +08:00
```css
.n-button {
margin: 0 12px 8px 0;
}
```
2019-10-21 18:20:00 +08:00
```js
2020-10-22 18:14:09 +08:00
const sleep = () => new Promise(resolve => setTimeout(resolve, 1000))
const countDown = second => `Count down ${second} second`
export default {
2020-10-22 18:14:09 +08:00
inject: [
'dialog'
],
methods: {
2019-10-21 18:20:00 +08:00
handleClick(e) {
2020-10-22 18:14:09 +08:00
const dialog = this.dialog.success({
2020-02-04 13:23:36 +08:00
title: 'Async',
content:
2020-02-04 13:23:36 +08:00
'Click and count down 3 second',
positiveText: 'Confirm',
2020-03-12 21:32:47 +08:00
onPositiveClick: () => {
2020-10-22 18:14:09 +08:00
dialog.loading = true
return new Promise(resolve => {
sleep()
.then(() => { dialog.content = countDown(2); return sleep() })
.then(() => { dialog.content = countDown(1); return sleep() })
.then(() => { dialog.content = countDown(0) })
.then(resolve)
})
}
2020-01-30 18:48:38 +08:00
})
}
}
2020-01-30 18:48:38 +08:00
}
2020-10-22 18:14:09 +08:00
```