naive-ui/demo/documentation/components/modal/zhCN/controlled.demo.md

44 lines
742 B
Markdown
Raw Normal View History

2020-02-04 14:55:55 +08:00
# 受控显示
Modal 的显示可以是受控的。
```html
<n-button
@click="handleClick"
>
来吧
2020-02-04 14:55:55 +08:00
</n-button>
<n-modal :show="modalActive">
2020-02-04 14:55:55 +08:00
<n-card
style="width: 600px;"
title="模态框"
:bordered="false"
size="huge"
>
倒计时 {{ timeout / 1000 }} 秒
</n-card>
</n-modal>
```
```js
export default {
data () {
return {
modalActive: false,
2020-02-04 14:55:55 +08:00
timeout: 6000
}
},
methods: {
handleClick () {
this.modalActive = true
2020-02-04 14:55:55 +08:00
this.timeout = 6000
let countdown = () => {
if (this.timeout <= 0) {
this.modalActive = false
2020-02-04 14:55:55 +08:00
} else {
this.timeout -= 1000
setTimeout(countdown, 1000)
}
}
countdown()
}
}
}
```