Dialog 对话框

通过 v-model 控制的模态内容容器。

基础用法

<template>
  <div>
    <AuButton type="primary" @click="dialogVisible = true">编辑项目资料</AuButton>
    <AuDialog
      v-model="dialogVisible"
      title="编辑项目资料"
      width="520px"
      close-on-click-modal
    >
      <form class="dialog-demo__form" @submit.prevent="saveProfile">
        <label>
          <span>项目名称</span>
          <input v-model.trim="draftProfile.name" autofocus />
        </label>
        <label>
          <span>项目说明</span>
          <textarea v-model.trim="draftProfile.description" rows="3"></textarea>
        </label>
      </form>
      <template #footer>
        <AuButton @click="dialogVisible = false">取消</AuButton>
        <AuButton type="primary" :disabled="!draftProfile.name" @click="saveProfile">保存</AuButton>
      </template>
    </AuDialog>
  </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { AuButton, AuDialog } from 'aurora-plus';
const dialogVisible = ref(false);
const draftProfile = reactive({
  name: '示例应用',
  description: '一个专注 Markdown 编辑体验的桌面应用。',
});
function saveProfile() {
  if (!draftProfile.name) return;
  dialogVisible.value = false;
}
</script>
<style scoped>
.dialog-demo__form,
.dialog-demo__form label {
  display: grid;
  gap: 14px;
}
.dialog-demo__form label {
  gap: 7px;
  color: var(--au-color-text-default);
  font-size: 13px;
}
.dialog-demo__form input,
.dialog-demo__form textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--au-color-border-default);
  border-radius: var(--au-radius-control);
  color: var(--au-color-text-primary);
  background: transparent;
  outline: none;
  resize: vertical;
}
.dialog-demo__form input:focus,
.dialog-demo__form textarea:focus {
  border-color: var(--au-color-primary);
}
</style>

Dialog API

Attributes

属性	说明	类型	默认值
modelValue / v-model	是否显示	boolean	true
title	默认标题	string	''
width	宽度；数字转换为 px	string / number	min(560px, calc(100vw - 32px))
height	固定高度；数字转换为 px	string / number	''
maxHeight	最大高度；数字转换为 px	string / number	90vh
top	对话框顶部外边距；数字转换为 px	string / number	''
modal	是否启用透明模态交互层	boolean	true
lockScroll	显示期间是否锁定页面滚动	boolean	true
appendToBody	是否 Teleport 到 body	boolean	true
closeOnClickModal	点击遮罩是否关闭	boolean	false
closeOnOverlay	closeOnClickModal 的兼容属性	boolean	false
closeOnPressEscape	按 Escape 是否关闭	boolean	true
showClose	是否显示右上角关闭按钮	boolean	true
closeLabel	关闭按钮提示	string	关闭
zIndex	基础层级；嵌套时实际层级至少比父浮层高 1，内部浮层自动继承	number	10000

Events

事件名	说明	参数
update:modelValue	内部请求关闭时更新绑定值	(visible: boolean)
open	开始打开时触发	—
opened	打开过渡结束后触发	—
close	组件内部触发关闭时调用	(reason: DialogCloseReason)
closed	关闭过渡结束后触发	—

Slots

插槽名	作用域参数	说明
default		对话框正文
header		自定义标题区域
footer		底部操作区；未提供时不渲染 footer

Exposes

属性或方法	说明
close(reason?)	从组件实例主动关闭，默认 reason 为 api
dialogRef	对话框内容根元素引用