mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-21 04:50:14 +08:00
487001d697
.demo.md for component demo .demo-entry.md for demo entry .md for common docs
726 B
726 B
Controlled
Modal can be controlled.
<n-button
@click="handleClick"
>
Start Me up
</n-button>
<n-modal :show="modalActive">
<n-card
style="width: 600px;"
title="Modal"
:bordered="false"
size="huge"
>
Countdown {{ timeout / 1000 }}s
</n-card>
</n-modal>
export default {
data () {
return {
modalActive: false,
timeout: 6000
}
},
methods: {
handleClick () {
this.modalActive = true
this.timeout = 6000
let countdown = () => {
if (this.timeout <= 0) {
this.modalActive = false
} else {
this.timeout -= 1000
setTimeout(countdown, 1000)
}
}
countdown()
}
}
}