当前位置：首页 > 前端教程

messagebox elementui

2026-03-05 22:11:25前端教程

MessageBox 组件的基本用法

Element UI 的 MessageBox 组件用于显示弹窗提示，包括警告、确认、提示等信息。通过调用 $alert、$confirm、$prompt 方法可以快速生成弹窗。

this.$alert('这是一条提示消息', '标题', {
  confirmButtonText: '确定',
  callback: action => {
    console.log('用户点击了确定');
  }
});

MessageBox 的类型

MessageBox 提供多种类型的弹窗，包括 alert、confirm 和 prompt。alert 用于显示提示信息，confirm 用于确认操作，prompt 用于获取用户输入。

this.$confirm('确认删除此条目吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  console.log('用户确认删除');
}).catch(() => {
  console.log('用户取消删除');
});

自定义 MessageBox

可以通过配置选项自定义 MessageBox 的样式和行为。例如，修改按钮文本、设置弹窗宽度、添加自定义类名等。

this.$msgbox({
  title: '自定义标题',
  message: '这是一条自定义消息',
  showCancelButton: true,
  confirmButtonText: '自定义确认',
  cancelButtonText: '自定义取消',
  customClass: 'custom-message-box'
}).then(() => {
  console.log('自定义确认');
}).catch(() => {
  console.log('自定义取消');
});

MessageBox 的异步关闭

MessageBox 支持异步关闭，可以在 beforeClose 回调中执行异步操作，例如发送网络请求，再根据结果决定是否关闭弹窗。

this.$confirm('确认提交数据吗？', '提示', {
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      instance.confirmButtonLoading = true;
      setTimeout(() => {
        done();
        instance.confirmButtonLoading = false;
      }, 1000);
    } else {
      done();
    }
  }
}).then(() => {
  console.log('提交成功');
});

MessageBox 的全局配置

可以通过 MessageBox.setDefaults 方法设置全局默认配置，例如默认的按钮文本、弹窗宽度等。

import { MessageBox } from 'element-ui';

MessageBox.setDefaults({
  confirmButtonText: '全局确认',
  cancelButtonText: '全局取消',
  width: '400px'
});

MessageBox 的 HTML 内容

MessageBox 的 message 属性支持 HTML 字符串，可以通过 dangerouslyUseHTMLString 选项启用。

this.$alert('<strong>这是 HTML 内容</strong>', 'HTML 标题', {
  dangerouslyUseHTMLString: true
});

MessageBox 的事件监听

MessageBox 提供 close 和 action 事件，可以在弹窗关闭或用户操作时触发回调。

const msgbox = this.$msgbox({
  title: '事件监听',
  message: '关闭或操作时会触发事件',
  showCancelButton: true
});

msgbox.on('close', () => {
  console.log('弹窗关闭');
});

msgbox.on('action', (action) => {
  console.log('用户操作:', action);
});

messagebox elementui