7.7 模态交互组件详解

“模态交互组件”指的是那些会打断用户当前操作、需要用户响应后才能继续的组件。Element Plus 提供了四大核心模态交互组件：

1. el-dialog - 对话框
2. el-message-box - 消息弹框
3. el-message - 消息提示
4. el-notification - 通知

🎯 Element Plus 模态交互组件详解

一、el-dialog - 对话框（最常用）

用于展示复杂内容、表单、确认操作等。

✅ 基本结构

<template>
  <el-button @click="dialogVisible = true">打开对话框</el-button>

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

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

const dialogVisible = ref(false)

const handleClose = (done) => {
  ElMessageBox.confirm('确认关闭吗？')
    .then(() => done())
    .catch(() => {})
}

const confirm = () => {
  // 提交逻辑
  dialogVisible.value = false
}
</script>

🔧 核心属性

💡 高级用法

• 表单对话框：嵌入 el-form 实现新增/编辑弹窗。
• 拖拽对话框：需结合第三方库如 vuedraggable。
• 居中显示：align-center 属性使内容垂直居中。

<el-dialog center title="居中对话框">
  <p>内容垂直居中</p>
</el-dialog>

二、el-message-box - 消息弹框（确认/提示）

用于确认操作、输入提示、登录框等需要用户明确反馈的场景。

✅ 基本用法

import { ElMessageBox } from 'element-plus'

// 确认框
ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '警告', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
})
.then(() => {
  ElMessage.success('删除成功')
})
.catch(() => {
  ElMessage.info('已取消删除')
})

🧩 类型

🔧 常用配置项

ElMessageBox.confirm('内容', '标题', {
  type: 'warning',           // 类型：success/warning/info/error
  showCancelButton: true,    // 显示取消按钮
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  closeOnClickModal: false,  // 点遮罩不关闭
  inputPlaceholder: '请输入内容',
  inputValidator: (value) => value.length > 2, // 输入校验
  inputErrorMessage: '内容过短'
})

💡 实战：输入密码确认

ElMessageBox.prompt('请输入管理员密码', '权限验证', {
  type: 'password',
  inputType: 'password',
  showCancelButton: true,
  confirmButtonText: '确认',
  cancelButtonText: '取消',
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      if (instance.inputValue === '123456') {
        done()
        ElMessage.success('验证通过')
      } else {
        ElMessage.error('密码错误')
      }
    } else {
      done()
    }
  }
})

三、el-message - 消息提示（轻量）

用于轻量级反馈，如操作成功、失败、警告等，不会阻塞用户操作。

✅ 基本用法

import { ElMessage } from 'element-plus'

ElMessage('这是一条消息')
ElMessage.success('操作成功')
ElMessage.warning('警告内容')
ElMessage.error('出错了')
ElMessage.info('这是一条信息')

🔧 配置项

ElMessage({
  message: '自定义消息',
  type: 'success',
  duration: 3000,           // 显示时间（ms），0 为永久
  showClose: true,          // 显示关闭按钮
  center: true,             // 文字居中
  offset: 100,              // 距离顶部距离
  grouping: true,           // 相同内容合并
  onClose: () => console.log('关闭了')
})

🚫 注意

• ElMessage 不是模态框，它只是提示，用户无需交互。
• 不会阻止页面其他操作。

四、el-notification - 通知

类似 ElMessage，但出现在右上角，常用于系统通知、提醒。

✅ 基本用法

import { ElNotification } from 'element-plus'

ElNotification({
  title: '提示',
  message: '这是一条通知',
  type: 'success',
  duration: 4000,
  position: 'top-right'
})

// 快捷方式
ElNotification.success('操作成功')
ElNotification.warning('警告')

🔧 配置项

✅ 四大组件对比总结

🎯 使用场景推荐