2024年3月26日发(作者：)

Element-UI MessageBox 关闭方法

Element-UI 是一个基于 Vue 的高质量 UI 组件库，广泛应用于各种 Web

开发项目中。MessageBox 是 Element-UI 提供的一个非常实用的组件，用于显

示消息提示、确认信息或收集用户输入等。在某些场景下，我们可能需要手动

关闭 MessageBox。下面将介绍如何在 Element-UI 中关闭 MessageBox。

### 使用 MessageBox 的 API

Element-UI 的 MessageBox 组件提供了一系列 API，允许我们进行定制化

的操作。要手动关闭 MessageBox，你可以使用 `()`、

`m()` 或 `()` 方法，并在这些方法中指定

`beforeClose` 回调函数。这个回调函数会在 MessageBox 关闭之前触发，通过

控制这个回调函数的返回值，我们可以实现关闭 MessageBox 的功能。

### 示例：手动关闭 MessageBox

下面是一个使用 `m()` 方法创建 MessageBox，并通过

`beforeClose` 回调函数手动关闭 MessageBox 的示例：

```javascript

import { MessageBox } from 'element-ui';

// 显示 MessageBox

m({

title: '提示',

message: '这是一条消息提示',

beforeClose: (action, instance, done) => {

if (action === 'confirm') {

// 确认操作，允许关闭 MessageBox

done();

} else {

// 取消操作，阻止关闭 MessageBox

done(false);

}

}

}).then(action => {

if (action === 'confirm') {

('用户点击了确定');

} else if (action === 'cancel') {

('用户点击了取消');

}

}).catch(err => {

('MessageBox 关闭出错', err);

});

```

在上面的示例中，`beforeClose` 回调函数接收三个参数：`action`、

`instance` 和 `done`。`action` 表示用户点击的操作（'confirm' 或 'cancel'），

`instance` 是 MessageBox 的实例，`done` 是一个回调函数，用于通知 Element-

UI 是否允许关闭 MessageBox。通过控制 `done()` 函数的参数，我们可以决定

是否关闭 MessageBox。如果传入 `false`，则 MessageBox 会保持打开状态。否

则，MessageBox 将按照用户的操作正常关闭。