Dialog 对话框

学习目标

通过本章学习，你将掌握：

基础对话框：掌握 Dialog 的基本使用方法和属性配置
对话框尺寸设置：学会控制对话框的宽度、高度和位置
对话框拖拽功能：实现可拖拽的对话框交互
对话框嵌套处理：处理复杂的嵌套对话框场景
对话框动画效果：自定义对话框的显示和隐藏动画
对话框事件处理：掌握各种事件的监听和处理
对话框无障碍：实现符合无障碍标准的对话框
对话框性能优化：优化对话框的渲染和内存使用

预计学习时间： 105分钟

概述

Dialog 对话框是一个模态弹出层组件，用于在保留当前页面状态的情况下，向用户展示重要信息或承载相关操作。它提供了高度的定制性，适合复杂的交互场景。

主要特性

模态交互：阻止用户与背景页面交互，确保用户专注于对话框内容
懒渲染：内容在首次打开时才渲染，优化初始加载性能
结构清晰：分为头部、主体和底部三个区域，支持灵活定制
尺寸控制：支持自定义宽度、高度和位置设置
关闭控制：提供多种关闭方式和关闭前确认机制
嵌套支持：支持多层对话框嵌套，满足复杂业务需求
无障碍访问：内置键盘导航和屏幕阅读器支持
动画效果：提供平滑的显示和隐藏动画

适用场景

信息展示：如用户详情、产品介绍、帮助说明等
表单操作：如新增、编辑、设置等需要用户输入的场景
确认操作：如删除确认、重要操作提醒等
内容预览：如图片查看、文档预览、视频播放等
复杂交互：如多步骤向导、嵌套选择、数据筛选等
错误处理：如错误详情展示、异常信息说明等

基础用法

需要设置 model-value / v-model 属性，它接收 Boolean，当为 true 时显示 Dialog。title 属性用于定义标题，它是可选的，默认值为空。

vue

<template>
  <el-button plain @click="dialogVisible = true">
    点击打开 Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="500"
    :before-close="handleClose"
  >
    <span>这是一段信息</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('确认关闭？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

自定义内容

对话框的内容可以是任何东西，甚至是一个表格或表单。此示例显示如何在 Dialog 中使用 Element Plus 的表格和表单。

vue

<template>
  <!-- 表格 Dialog -->
  <el-button plain @click="dialogTableVisible = true">
    打开嵌套表格的 Dialog
  </el-button>
  <el-dialog v-model="dialogTableVisible" title="收货地址">
    <el-table :data="gridData">
      <el-table-column property="date" label="日期" width="150" />
      <el-table-column property="name" label="姓名" width="200" />
      <el-table-column property="address" label="地址" />
    </el-table>
  </el-dialog>

  <!-- 表单 Dialog -->
  <el-button plain @click="dialogFormVisible = true">
    打开嵌套表单的 Dialog
  </el-button>
  <el-dialog v-model="dialogFormVisible" title="收货地址">
    <el-form :model="form">
      <el-form-item label="活动名称" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="活动区域" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="区域一" value="shanghai" />
          <el-option label="区域二" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '120px'

const gridData = [
  {
    date: '2016-05-02',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  },
  {
    date: '2016-05-04',
    name: '王小虎',
    address: '上海市普陀区金沙江路 1518 弄'
  }
]

const form = ref({
  name: '',
  region: ''
})
</script>

自定义头部

header 可用于自定义显示标题的区域。为了保持可用性，除了使用此插槽外，使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。

vue

<template>
  <el-button plain @click="dialogVisible = true">
    自定义头部
  </el-button>

  <el-dialog v-model="dialogVisible" width="500">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">自定义头部</h4>
        <el-button type="danger" @click="close">
          <el-icon><CloseBold /></el-icon>
        </el-button>
      </div>
    </template>
    <span>这是一段信息</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

嵌套的对话框

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。通常我们不建议使用嵌套对话框。如果必须要在一个对话框内展示另一个对话框，可以将内部嵌套的对话框属性 append-to-body 设置为 true。

vue

<template>
  <el-button plain @click="outerVisible = true">
    点击打开外层 Dialog
  </el-button>

  <el-dialog v-model="outerVisible" title="外层 Dialog">
    <el-dialog
      v-model="innerVisible"
      width="30%"
      title="内层 Dialog"
      append-to-body
    >
      <span>内层对话框内容</span>
    </el-dialog>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="outerVisible = false">取消</el-button>
        <el-button type="primary" @click="innerVisible = true">
          打开内层 Dialog
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const outerVisible = ref(false)
const innerVisible = ref(false)
</script>

内容居中

将 center 设置为 true 即可使标题和底部居中。center 仅影响标题和底部区域。

vue

<template>
  <el-button plain @click="centerDialogVisible = true">
    点击打开居中的 Dialog
  </el-button>

  <el-dialog v-model="centerDialogVisible" title="提示" width="30%" center>
    <span>需要注意的是内容是任意的，居中是指头部和底部居中。</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

居中对话框

设置 align-center 为 true 使对话框水平垂直居中。由于对话框垂直居中在弹性盒子中，所以 top 属性将不起作用。

vue

<template>
  <el-button plain @click="centerDialogVisible = true">
    点击打开居中的 Dialog
  </el-button>

  <el-dialog
    v-model="centerDialogVisible"
    title="提示"
    width="30%"
    align-center
  >
    <span>对话框在屏幕中心显示</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

关闭时销毁

启用此功能时，默认栏位下的内容将使用 v-if 指令销毁。当出现性能问题时，可以启用此功能。

vue

<template>
  <el-button plain @click="dialogVisible = true">
    点击打开 Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="提示"
    width="30%"
    destroy-on-close
  >
    <span>关闭时销毁内容</span>
  </el-dialog>
</template>

可拖拽对话框

设置 draggable 属性为 true 以做到拖拽。设置 overflow 为 true 可以让拖拽范围超出可视区。

vue

<template>
  <el-button plain @click="dialogVisible = true">
    点击打开可拖拽的 Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="可拖拽的对话框"
    width="30%"
    draggable
    overflow
  >
    <span>试着拖动一下header部分吧</span>
  </el-dialog>
</template>

全屏

设置 fullscreen 属性来打开全屏对话框。如果 fullscreen 为 true，则 width、top 和 draggable 属性无效。

vue

<template>
  <el-button plain @click="dialogVisible = true">
    点击打开全屏 Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="全屏对话框"
    fullscreen
  >
    <span>这是一个全屏对话框</span>
  </el-dialog>
</template>

模态框

将 modal 设置为 false 会隐藏对话框的模态（覆盖层）。当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true。

vue

<template>
  <el-button plain @click="dialogVisible = true">
    点击打开非模态的 Dialog
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="非模态对话框"
    :modal="false"
    append-to-body
  >
    <span>这是一个非模态对话框</span>
  </el-dialog>
</template>

实际应用示例

用户信息编辑对话框

这个示例展示了如何创建一个用户信息编辑对话框，包含表单验证、提交处理和错误处理。

vue

<template>
  <div class="user-management">
    <el-button type="primary" @click="openEditDialog">编辑用户信息</el-button>
    
    <el-dialog
      v-model="dialogVisible"
      title="编辑用户信息"
      width="600px"
      :before-close="handleClose"
      destroy-on-close
    >
      <el-form
        ref="formRef"
        :model="userForm"
        :rules="rules"
        label-width="100px"
        @submit.prevent
      >
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" placeholder="请输入用户名" />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" placeholder="请选择角色">
            <el-option label="管理员" value="admin" />
            <el-option label="编辑者" value="editor" />
            <el-option label="查看者" value="viewer" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-switch
            v-model="userForm.status"
            active-text="启用"
            inactive-text="禁用"
          />
        </el-form-item>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" :loading="loading" @click="submitForm">
            {{ loading ? '保存中...' : '保存' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const dialogVisible = ref(false)
const loading = ref(false)
const formRef = ref()

const userForm = reactive({
  username: '',
  email: '',
  role: '',
  status: true
})

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ]
}

const openEditDialog = () => {
  // 模拟加载用户数据
  Object.assign(userForm, {
    username: 'john_doe',
    email: 'john@example.com',
    role: 'editor',
    status: true
  })
  dialogVisible.value = true
}

const submitForm = async () => {
  try {
    await formRef.value.validate()
    loading.value = true
    
    // 模拟 API 调用
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    ElMessage.success('用户信息更新成功')
    dialogVisible.value = false
  } catch (error) {
    ElMessage.error('表单验证失败，请检查输入')
  } finally {
    loading.value = false
  }
}

const handleClose = (done) => {
  if (loading.value) {
    ElMessage.warning('正在保存中，请稍候...')
    return
  }
  
  ElMessageBox.confirm('确认关闭？未保存的更改将丢失。', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    done()
  }).catch(() => {})
}
</script>

<style scoped>
.user-management {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  margin-left: 10px;
}
</style>

图片预览对话框

这个示例展示了如何创建一个图片预览对话框，支持多图切换、缩放和全屏显示。

vue

<template>
  <div class="image-gallery">
    <div class="image-grid">
      <div
        v-for="(image, index) in images"
        :key="index"
        class="image-item"
        @click="openPreview(index)"
      >
        <img :src="image.thumbnail" :alt="image.title" />
        <div class="image-overlay">
          <el-icon><ZoomIn /></el-icon>
        </div>
      </div>
    </div>
    
    <el-dialog
      v-model="previewVisible"
      :title="currentImage?.title"
      width="80%"
      top="5vh"
      :show-close="false"
      class="image-preview-dialog"
    >
      <template #header="{ close }">
        <div class="preview-header">
          <span class="dialog-title">{{ currentImage?.title }}</span>
          <div class="header-actions">
            <el-button
              :icon="FullScreen"
              circle
              @click="toggleFullscreen"
              title="全屏"
            />
            <el-button
              :icon="Close"
              circle
              @click="close"
              title="关闭"
            />
          </div>
        </div>
      </template>
      
      <div class="preview-content">
        <div class="image-container">
          <img
            ref="previewImg"
            :src="currentImage?.url"
            :alt="currentImage?.title"
            :style="imageStyle"
            @wheel="handleWheel"
          />
        </div>
        
        <div class="preview-controls">
          <el-button-group>
            <el-button :icon="ZoomOut" @click="zoomOut" title="缩小" />
            <el-button @click="resetZoom" title="重置">{{ Math.round(scale * 100) }}%</el-button>
            <el-button :icon="ZoomIn" @click="zoomIn" title="放大" />
          </el-button-group>
          
          <el-button-group>
            <el-button
              :icon="ArrowLeft"
              @click="prevImage"
              :disabled="currentIndex === 0"
              title="上一张"
            />
            <el-button>{{ currentIndex + 1 }} / {{ images.length }}</el-button>
            <el-button
              :icon="ArrowRight"
              @click="nextImage"
              :disabled="currentIndex === images.length - 1"
              title="下一张"
            />
          </el-button-group>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue'
import {
  ZoomIn,
  ZoomOut,
  FullScreen,
  Close,
  ArrowLeft,
  ArrowRight
} from '@element-plus/icons-vue'

const previewVisible = ref(false)
const currentIndex = ref(0)
const scale = ref(1)
const previewImg = ref()

const images = [
  {
    title: '风景图片 1',
    thumbnail: 'https://picsum.photos/200/150?random=1',
    url: 'https://picsum.photos/800/600?random=1'
  },
  {
    title: '风景图片 2',
    thumbnail: 'https://picsum.photos/200/150?random=2',
    url: 'https://picsum.photos/800/600?random=2'
  },
  {
    title: '风景图片 3',
    thumbnail: 'https://picsum.photos/200/150?random=3',
    url: 'https://picsum.photos/800/600?random=3'
  }
]

const currentImage = computed(() => images[currentIndex.value])

const imageStyle = computed(() => ({
  transform: `scale(${scale.value})`,
  transition: 'transform 0.3s ease'
}))

const openPreview = (index) => {
  currentIndex.value = index
  scale.value = 1
  previewVisible.value = true
}

const zoomIn = () => {
  scale.value = Math.min(scale.value * 1.2, 3)
}

const zoomOut = () => {
  scale.value = Math.max(scale.value / 1.2, 0.5)
}

const resetZoom = () => {
  scale.value = 1
}

const handleWheel = (event) => {
  event.preventDefault()
  if (event.deltaY < 0) {
    zoomIn()
  } else {
    zoomOut()
  }
}

const prevImage = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
    scale.value = 1
  }
}

const nextImage = () => {
  if (currentIndex.value < images.length - 1) {
    currentIndex.value++
    scale.value = 1
  }
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    previewImg.value?.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}
</script>

<style scoped>
.image-gallery {
  padding: 20px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.image-item {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.image-item:hover {
  transform: scale(1.05);
}

.image-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  color: white;
  font-size: 24px;
}

.image-item:hover .image-overlay {
  opacity: 1;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.preview-content {
  text-align: center;
}

.image-container {
  margin-bottom: 20px;
  overflow: hidden;
}

.image-container img {
  max-width: 100%;
  max-height: 60vh;
  cursor: grab;
}

.image-container img:active {
  cursor: grabbing;
}

.preview-controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

:deep(.image-preview-dialog .el-dialog__body) {
  padding: 20px;
}
</style>

API

Attributes

属性名	说明	类型	可选值	默认值
model-value / v-model	是否显示 Dialog	boolean	—	—
title	Dialog 的标题，也可通过具名 slot （见下表）传入	string	—	—
width	Dialog 的宽度	string / number	—	50%
fullscreen	是否为全屏 Dialog	boolean	—	false
top	Dialog CSS 中的 margin-top 值	string	—	15vh
modal	是否需要遮罩层	boolean	—	true
modal-class	遮罩的自定义类名	string	—	—
append-to-body	Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true	boolean	—	false
append-to	Dialog 挂载到哪个 DOM 元素将覆盖 append-to-body	string	—	body
lock-scroll	是否在 Dialog 出现时将 body 滚动锁定	boolean	—	true
custom-class	Dialog 的自定义类名	string	—	—
open-delay	Dialog 打开的延时时间，单位毫秒	number	—	0
close-delay	Dialog 关闭的延时时间，单位毫秒	number	—	0
close-on-click-modal	是否可以通过点击 modal 关闭 Dialog	boolean	—	true
close-on-press-escape	是否可以通过按下 ESC 关闭 Dialog	boolean	—	true
show-close	是否显示关闭按钮	boolean	—	true
before-close	关闭前的回调，会暂停 Dialog 的关闭	function(done)，done 用于关闭 Dialog	—	—
draggable	为 Dialog 启用可拖拽功能	boolean	—	false
overflow	拖拽时, 是否可以拖出可视区域	boolean	—	false
center	是否对头部和底部采用居中布局	boolean	—	false
align-center	是否水平垂直对齐对话框	boolean	—	false
destroy-on-close	当关闭 Dialog 时，销毁其中的元素	boolean	—	false
close-icon	自定义关闭图标，默认 Close	string / Component	—	—
z-index	和原生的 CSS 的 z-index 相同，改变 z 轴的顺序	number	—	—
header-aria-level	header 的 aria-level 属性	number	—	2

Events

事件名	说明	回调参数
open	Dialog 打开的回调	—
opened	Dialog 打开动画结束时的回调	—
close	Dialog 关闭的回调	—
closed	Dialog 关闭动画结束时的回调	—
open-auto-focus	输入焦点聚焦在 Dialog 内容时的回调	—
close-auto-focus	输入焦点从 Dialog 内容失焦时的回调	—

Slots

插槽名	说明	子标签
default	Dialog 的内容	—
header	对话框标题的内容；会替换标题部分，但不会移除关闭按钮。
title	与 header 作用相同请使用 header
footer	Dialog 按钮操作区的内容	—

Exposes

方法名	说明	类型
visible	当前 Dialog 是否显示	Ref<boolean>
dialogContentRef	Dialog 内容的 ref	Ref<HTMLElement>

最佳实践

合理使用 Dialog

避免嵌套过深：尽量避免在 Dialog 中嵌套过多内容，保持界面简洁
明确的操作按钮：重要操作应该有明确的确认和取消按钮
关闭前确认：使用 before-close 进行关闭前确认，防止用户误操作
合适的尺寸：根据内容选择合适的 width 和 height

性能优化

懒渲染：Dialog 的内容是懒渲染的，首次打开前不会渲染到 DOM
销毁机制：对于复杂内容，可以使用 destroy-on-close 属性在关闭时销毁内容
避免过多响应式数据：避免在 Dialog 中放置过多的响应式数据

可访问性

键盘导航：确保 Dialog 支持 ESC 键关闭
焦点管理：Dialog 打开时焦点应该正确设置
语义化标题：使用有意义的 title 属性

用户体验

加载状态：对于需要异步操作的 Dialog，显示适当的加载状态
错误处理：提供清晰的错误信息和处理方式
响应式设计：在移动设备上考虑使用 fullscreen 属性

常见问题

Q: Dialog 的内容什么时候渲染？

A: Dialog 的内容是懒渲染的，在被第一次打开之前，传入的默认 slot 不会被立即渲染到 DOM 上。如果需要执行 DOM 操作，请在 open 事件回调中进行。

Q: 嵌套 Dialog 时需要注意什么？

A: 如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

A: 当 modal 的值为 false 时，请一定要确保 append-to-body 属性为 true，由于 Dialog 使用 position: relative 定位，当外层的遮罩层被移除时，Dialog 则会根据当前 DOM 上的祖先节点来定位，因此可能造成定位问题。

Q: 如何自定义 Dialog 的头部？

A: 可以使用 header 插槽来自定义显示标题的区域。为了保持可用性，除了使用此插槽外，建议使用 title 属性，或使用 titleId 插槽属性来指定哪些元素应该读取为对话框标题。

Q: 如何在 Dialog 中使用表单验证？

A: 可以在 Dialog 的 footer 插槽中添加表单验证逻辑：

vue

<template>
  <el-dialog v-model="dialogVisible" title="表单验证">
    <el-form ref="formRef" :model="form" :rules="rules">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username" />
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="form.email" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const formRef = ref()
const submitForm = async () => {
  try {
    await formRef.value.validate()
    // 表单验证通过，执行提交逻辑
    dialogVisible.value = false
  } catch (error) {
    // 表单验证失败
    console.log('验证失败')
  }
}
</script>

Q: Dialog 内容过长如何处理？

A: 可以设置固定高度并添加滚动条：

css

.el-dialog__body {
  max-height: 400px;
  overflow-y: auto;
}

或者使用 fullscreen 属性：

vue

<el-dialog v-model="dialogVisible" fullscreen>
  <!-- 长内容 -->
</el-dialog>

Q: 如何实现 Dialog 的异步关闭？

A: 使用 before-close 属性实现异步关闭确认：

vue

<template>
  <el-dialog
    v-model="dialogVisible"
    title="异步关闭"
    :before-close="handleClose"
  >
    <span>确定要关闭吗？</span>
  </el-dialog>
</template>

<script setup>
const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      done() // 关闭 Dialog
    })
    .catch(() => {
      // 取消关闭
    })
}
</script>

Q: 如何在 Dialog 中处理网络请求？

A: 建议在 Dialog 打开时发起请求，并显示加载状态：

vue

<template>
  <el-dialog v-model="dialogVisible" @open="fetchData">
    <div v-loading="loading">
      <div v-if="!loading && data">
        <!-- 显示数据 -->
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
const loading = ref(false)
const data = ref(null)

const fetchData = async () => {
  loading.value = true
  try {
    data.value = await api.getData()
  } catch (error) {
    ElMessage.error('数据加载失败')
  } finally {
    loading.value = false
  }
}
</script>

Q: Dialog 在移动端的适配问题？

A: 在移动端建议使用全屏模式：

vue

<template>
  <el-dialog
    v-model="dialogVisible"
    :fullscreen="isMobile"
    :width="isMobile ? '100%' : '50%'"
  >
    <!-- 内容 -->
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'

const isMobile = computed(() => {
  return window.innerWidth < 768
})
</script>

实践项目

对话框管理系统

创建一个完整的对话框管理系统，包含以下功能：

多层对话框管理
- 实现对话框的层级管理
- 处理嵌套对话框的显示和隐藏
- 管理对话框的 z-index 层级
对话框队列系统
- 实现对话框的队列管理
- 支持对话框的排队显示
- 处理对话框的优先级
动态对话框内容
- 支持动态加载对话框内容
- 实现对话框内容的懒加载
- 处理异步数据的显示
对话框状态管理
- 使用 Pinia 管理对话框状态
- 实现对话框的全局状态同步
- 处理对话框的持久化存储

实践要点

合理使用 before-close 进行关闭前确认
实现对话框的拖拽和缩放功能
优化对话框的性能和内存使用
确保对话框的无障碍访问支持
处理移动端的适配问题

学习检查清单

基础功能

[ ] 掌握 Dialog 的基本使用方法
[ ] 理解 model-value 的双向绑定机制
[ ] 熟练使用 title、width、height 等基础属性
[ ] 掌握 before-close 回调的使用

高级功能

[ ] 实现对话框的拖拽功能
[ ] 处理嵌套对话框的场景
[ ] 自定义对话框的头部和底部
[ ] 实现对话框的全屏显示

性能优化

[ ] 理解对话框的懒渲染机制
[ ] 合理使用 destroy-on-close 属性
[ ] 优化对话框的动画效果
[ ] 处理大量数据的显示

用户体验

[ ] 实现对话框的响应式设计
[ ] 处理键盘导航和焦点管理
[ ] 提供清晰的错误提示和加载状态
[ ] 确保对话框的无障碍访问

注意事项

弹出层的层级管理

合理设置 z-index 避免层级冲突
使用 append-to-body 处理定位问题
注意嵌套对话框的层级关系
避免过多的对话框同时显示

用户操作的连贯性

保持操作流程的逻辑性
提供明确的操作反馈
避免突然的界面跳转
确保用户能够轻松取消操作

移动端的交互体验

在小屏幕设备上使用全屏模式
优化触摸操作的响应
考虑虚拟键盘的影响
提供合适的手势支持

弹出层的性能影响

避免在对话框中渲染过多内容
使用懒加载减少初始渲染时间
及时销毁不需要的对话框实例
监控内存使用情况

学习记录

学习日期： ___________
完成状态： ___________
学习笔记：

遇到的问题：

解决方案：

实践项目完成情况：

[ ] 对话框管理系统
[ ] 多层对话框处理
[ ] 对话框队列系统
[ ] 动态内容加载
[ ] 状态管理集成

总结

Dialog 对话框是 Element Plus 中功能最为丰富的弹出层组件之一，具有以下特点：

功能完整：支持模态交互、懒渲染、嵌套显示等核心功能
高度定制：提供丰富的插槽和属性，满足各种定制需求
交互友好：内置关闭确认、键盘导航等用户体验优化
性能优化：懒渲染机制和销毁控制确保良好的性能表现
无障碍支持：完善的键盘导航和屏幕阅读器支持
扩展性强：支持嵌套、队列管理等复杂应用场景

Dialog 适用于需要用户专注处理的重要交互场景，如表单编辑、内容预览、确认操作等。合理使用 Dialog 可以提升应用的用户体验和交互效率。

Dialog 对话框 ​

学习目标 ​

概述 ​

主要特性 ​

适用场景 ​

基础用法 ​

基础用法 ​

自定义内容 ​

自定义头部 ​

嵌套的对话框 ​

内容居中 ​

居中对话框 ​

关闭时销毁 ​

可拖拽对话框 ​

全屏 ​

模态框 ​

实际应用示例 ​

用户信息编辑对话框 ​

图片预览对话框 ​

API ​

Attributes ​

Events ​

Slots ​

Exposes ​

最佳实践 ​

合理使用 Dialog ​

性能优化 ​

可访问性 ​

用户体验 ​

常见问题 ​

Q: Dialog 的内容什么时候渲染？ ​

Q: 嵌套 Dialog 时需要注意什么？ ​

Q: 当 modal 为 false 时出现定位问题怎么办？ ​

Q: 如何自定义 Dialog 的头部？ ​

Q: 如何在 Dialog 中使用表单验证？ ​

Q: Dialog 内容过长如何处理？ ​

Q: 如何实现 Dialog 的异步关闭？ ​

Q: 如何在 Dialog 中处理网络请求？ ​

Q: Dialog 在移动端的适配问题？ ​

实践项目 ​

对话框管理系统 ​

实践要点 ​

学习检查清单 ​

基础功能 ​

高级功能 ​

性能优化 ​

用户体验 ​

注意事项 ​

弹出层的层级管理 ​

用户操作的连贯性 ​

移动端的交互体验 ​

弹出层的性能影响 ​

学习记录 ​

总结 ​

参考资料 ​

Dialog 对话框

学习目标

概述

主要特性

适用场景

基础用法

基础用法

自定义内容

自定义头部

嵌套的对话框

内容居中

居中对话框

关闭时销毁

可拖拽对话框

全屏

模态框

实际应用示例

用户信息编辑对话框

图片预览对话框

API

Attributes

Events

Slots

Exposes

最佳实践

合理使用 Dialog

性能优化

可访问性

用户体验

常见问题

Q: Dialog 的内容什么时候渲染？

Q: 嵌套 Dialog 时需要注意什么？

Q: 当 modal 为 false 时出现定位问题怎么办？

Q: 如何自定义 Dialog 的头部？

Q: 如何在 Dialog 中使用表单验证？

Q: Dialog 内容过长如何处理？

Q: 如何实现 Dialog 的异步关闭？

Q: 如何在 Dialog 中处理网络请求？

Q: Dialog 在移动端的适配问题？

实践项目

对话框管理系统

实践要点

学习检查清单

基础功能

高级功能

性能优化

用户体验

注意事项

弹出层的层级管理

用户操作的连贯性

移动端的交互体验

弹出层的性能影响

学习记录

总结

参考资料