2020-01-30 22:45:44 +08:00
|
|
|
# Controlled
|
|
|
|
Modal can be controlled.
|
|
|
|
```html
|
|
|
|
<n-button
|
|
|
|
@click="handleClick"
|
|
|
|
>
|
|
|
|
Start Me up
|
|
|
|
</n-button>
|
2020-03-20 12:14:34 +08:00
|
|
|
<n-modal :show="modalActive">
|
2020-01-30 22:45:44 +08:00
|
|
|
<n-card
|
|
|
|
style="width: 600px;"
|
|
|
|
title="Modal"
|
|
|
|
:bordered="false"
|
|
|
|
size="huge"
|
|
|
|
>
|
|
|
|
Countdown {{ timeout / 1000 }}s
|
|
|
|
</n-card>
|
|
|
|
</n-modal>
|
|
|
|
```
|
|
|
|
```js
|
|
|
|
export default {
|
|
|
|
data () {
|
|
|
|
return {
|
2020-03-20 12:14:34 +08:00
|
|
|
modalActive: false,
|
2020-01-30 22:45:44 +08:00
|
|
|
timeout: 6000
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleClick () {
|
2020-03-20 12:14:34 +08:00
|
|
|
this.modalActive = true
|
2020-01-30 22:45:44 +08:00
|
|
|
this.timeout = 6000
|
|
|
|
let countdown = () => {
|
|
|
|
if (this.timeout <= 0) {
|
2020-03-20 12:14:34 +08:00
|
|
|
this.modalActive = false
|
2020-01-30 22:45:44 +08:00
|
|
|
} else {
|
|
|
|
this.timeout -= 1000
|
|
|
|
setTimeout(countdown, 1000)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
countdown()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
```
|