【区分vue2和vue3下的element UI MessageBox 弹框组件，分别详细介绍属性，事件，方法如何使用，并举例】

本文链接：https://blog.csdn.net/xiejunlan/article/details/139978165

在 Vue 2 中，Element UI 提供了 MessageBox 弹框组件，用于显示消息提示、确认消息和获取用户输入等。而在 Vue 3 的 Element Plus 中，虽然组件和 API 可能有所变化，但基本概念和用法是相似的。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中 MessageBox 的使用方式。

Vue 2 + Element UI

在 Vue 2 中，Element UI 的 MessageBox 组件是通过 this.$confirm、this.$alert、this.$prompt 等全局方法调用的，而不是直接在模板中作为组件使用。

方法

this.$confirm(message, title, options): 显示一个确认弹框。
this.$alert(message, title, options): 显示一个警告弹框。
this.$prompt(message, title, options): 显示一个带输入框的弹框。

options 参数：

type: 消息类型，如 success、warning、info、error。
title: 标题。
message: 消息内容。
callback: 回调函数，当用户点击确定或取消按钮时触发。
其他配置选项，如 customClass、showCancelButton 等。

示例：

<template>
  <el-button @click="showConfirm">显示确认弹框</el-button>
</template>

<script>
export default {
  methods: {
    showConfirm() {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定按钮后的操作
        console.log('用户点击确定');
      }).catch(() => {
        // 用户点击取消按钮后的操作
        console.log('用户点击取消');
      });
    }
  }
};
</script>

Vue 3 + Element Plus

在 Vue 3 的 Element Plus 中，虽然 MessageBox 的具体实现可能会有所不同，但基本概念和用法应该与 Vue 2 中的 Element UI 类似。你可能仍然会通过全局方法（如 ElMessageBox.confirm、ElMessageBox.alert、ElMessageBox.prompt）来调用它。

示例（假设 Element Plus 提供了类似的 API）：

<template>
  <el-button @click="showConfirm">显示确认弹框</el-button>
</template>

<script setup>
import { ElMessageBox } from 'element-plus';

const showConfirm = () => {
  ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击确定按钮后的操作
    console.log('用户点击确定');
  }).catch(() => {
    // 用户点击取消按钮后的操作
    console.log('用户点击取消');
  });
};
</script>

注意：由于 Element Plus 是 Element UI 的 Vue 3 版本，并且还在不断发展中，因此具体的 API 和使用方法可能会有所不同。务必参考 Element Plus 的官方文档以获取最准确的信息和示例。

在 Vue 3 中，由于 Composition API 的引入，你可能更倾向于使用 setup 函数和 import 语句来直接调用这些方法，而不是通过 this.$confirm 等方式。但是，如果你使用的是 Options API 或通过其他方式进行了配置，this.$confirm 等方式可能仍然可用。