N-UI

Appearance

Dialog 对话框 ​

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法 ​

Dialog 组件的基本使用方式。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog v-model="show" title="提示">
    <p>这是一段内容</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

自定义标题 ​

使用 title 属性来定义标题。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog v-model="show" title="自定义标题">
    <p>这是一段内容</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

自定义宽度 ​

使用 width 属性来设置对话框的宽度。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog v-model="show" title="提示" width="300px">
    <p>这是一段内容</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

全屏对话框 ​

设置 fullscreen 属性来全屏显示对话框。

vue
<template>
  <NButton @click="show = true">全屏对话框</NButton>
  <NDialog v-model="show" title="全屏对话框" fullscreen>
    <p>这是全屏对话框内容</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

禁止点击遮罩关闭 ​

设置 close-on-click-modal 为 false 来禁止点击遮罩关闭。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog v-model="show" title="提示" :closeOnClickModal="false">
    <p>点击遮罩不会关闭</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

隐藏关闭按钮 ​

设置 show-close 为 false 来隐藏关闭按钮。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog v-model="show" title="提示" :showClose="false">
    <p>没有关闭按钮</p>
    <template #footer>
      <NButton @click="show = false">关闭</NButton>
    </template>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

自定义页脚 ​

使用 footer 插槽来自定义页脚内容。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog v-model="show" title="提示">
    <p>这是一段内容</p>
    <template #footer>
      <div style="display: flex; justify-content: flex-end; gap: 12px;">
        <NButton @click="show = false">取消</NButton>
        <NButton type="primary" @click="show = false">确定</NButton>
      </div>
    </template>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

隐藏页脚 ​

设置 show-footer 为 false 来隐藏页脚。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog v-model="show" title="提示" :showFooter="false">
    <p>没有页脚</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

确认加载中 ​

设置 confirm-loading 属性来让确认按钮显示加载状态。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog
    v-model="show"
    title="提示"
    :confirmLoading="loading"
    @confirm="handleConfirm"
  >
    <p>点击确认按钮会显示加载状态</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const loading = ref(false)

const handleConfirm = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
    show.value = false
  }, 2000)
}
</script>

自定义按钮文字 ​

使用 confirm-text 和 cancel-text 属性来自定义按钮文字。

vue
<template>
  <NButton @click="show = true">打开对话框</NButton>
  <NDialog
    v-model="show"
    title="提示"
    confirmText="保存"
    cancelText="关闭"
  >
    <p>这是一段内容</p>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

嵌套对话框 ​

可以在一个对话框中嵌套另一个对话框。

vue
<template>
  <NButton @click="showOuter = true">打开外层对话框</NButton>
  <NDialog v-model="showOuter" title="外层对话框">
    <p>这是外层对话框内容</p>
    <NButton @click="showInner = true">打开内层对话框</NButton>
    <NDialog v-model="showInner" title="内层对话框" width="300px">
      <p>这是内层对话框内容</p>
    </NDialog>
  </NDialog>
</template>

<script setup>
import { ref } from 'vue'
const showOuter = ref(false)
const showInner = ref(false)
</script>

API ​

Props ​

属性说明类型默认值
modelValue是否显示对话框booleanfalse
title对话框标题string''
width对话框宽度string | number'520px'
fullscreen是否全屏显示booleanfalse
closeOnClickModal是否可以通过点击遮罩关闭booleantrue
closeOnPressEscape是否可以通过按下 Esc 关闭booleantrue
showClose是否显示关闭按钮booleantrue
showFooter是否显示页脚booleantrue
confirmText确认按钮文字string'确定'
cancelText取消按钮文字string'取消'
confirmLoading确认按钮是否加载中booleanfalse

Events ​

事件名说明类型
update:modelValue显示状态改变时触发(value: boolean) => void
open对话框打开时触发() => void
close对话框关闭时触发() => void
confirm点击确认按钮时触发() => void
cancel点击取消按钮时触发() => void

Slots ​

插槽名说明
default对话框内容
header对话框标题内容
footer对话框页脚内容