河北建设协会官方网站企业宣传片

在 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 等方式可能仍然可用。