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

38 lines
616 B
Markdown
Raw Normal View History

2020-02-04 14:55:55 +08:00
# 基础用法
Modal 的基础用法,你可以把任何东西放进去,比如一个卡片。
```html
<n-button
@click="modalActive = true"
2020-02-04 14:55:55 +08:00
>
来吧
2020-02-04 14:55:55 +08:00
</n-button>
<n-modal v-model="modalActive">
2020-02-04 14:55:55 +08:00
<n-card
style="width: 600px;"
title="模态框"
:bordered="false"
size="huge"
:segmented="{
content: 'soft',
footer: 'soft'
}"
>
<template v-slot:header-extra>
噢!
</template>
内容
<template v-slot:footer>
尾部
</template>
</n-card>
</n-modal>
```
```js
export default {
data () {
return {
modalActive: false
2020-02-04 14:55:55 +08:00
}
}
}
```