naive-ui/demo/documentation/components/modal/zhCN/basic.demo.md
07akioni 487001d697 build: add changelog to site, refactor loader based on suffix
.demo.md for component demo
.demo-entry.md for demo entry
.md for common docs
2020-08-19 23:30:04 +08:00

616 B

基础用法

Modal 的基础用法,你可以把任何东西放进去,比如一个卡片。

<n-button
  @click="modalActive = true"
>
  来吧
</n-button>
<n-modal v-model="modalActive">
  <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>
export default {
  data () {
    return {
      modalActive: false
    }
  }
}