messagebox elementui

messagebox 在 Element UI 中的使用

Element UI 提供了一套弹窗组件 MessageBox，用于展示提示、确认或输入框等交互式弹窗。以下是其常见用法和配置选项。

基本提示框

使用 ElMessageBox.alert 展示一个简单的提示框：

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

确认对话框

使用 ElMessageBox.confirm 展示确认对话框：

this.$confirm('确认执行此操作吗？', '提示', {
  confirmButtonText: '确定',
  cancelButtonText: '取消',
  type: 'warning'
}).then(() => {
  console.log('用户点击了确定');
}).catch(() => {
  console.log('用户点击了取消');
});

自定义内容

通过 ElMessageBox.prompt 展示输入框：

this.$prompt('请输入内容', '提示', {
  confirmButtonText: '提交',
  cancelButtonText: '取消',
  inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
  inputErrorMessage: '邮箱格式不正确'
}).then(({ value }) => {
  console.log('用户输入:', value);
}).catch(() => {
  console.log('用户取消输入');
});

全局配置

可以在 Vue 原型上挂载 $msgbox、$alert、$confirm 和 $prompt 方法，方便全局调用：

Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;

配置选项

常用配置选项包括：

• title: 弹窗标题。
• message: 弹窗内容。
• confirmButtonText: 确认按钮文本。
• cancelButtonText: 取消按钮文本。
• type: 弹窗类型（success、warning、info、error）。
• showCancelButton: 是否显示取消按钮。
• showConfirmButton: 是否显示确认按钮。
• closeOnClickModal: 是否点击遮罩层关闭弹窗。

自定义弹窗

通过 ElMessageBox 的 options 参数可以自定义弹窗内容和样式：

this.$msgbox({
  title: '自定义弹窗',
  message: h => h('div', { class: 'custom-message' }, '这里是自定义内容'),
  showCancelButton: true,
  confirmButtonText: '确认',
  cancelButtonText: '取消'
}).then(() => {
  console.log('确认操作');
}).catch(() => {
  console.log('取消操作');
});

国际化支持

Element UI 支持国际化，可以通过设置 i18n 配置调整弹窗按钮的默认文本：

import ElementUI from 'element-ui';
import locale from 'element-ui/lib/locale/lang/en';

Vue.use(ElementUI, { locale });

以上是 MessageBox 在 Element UI 中的常见用法和配置选项，可以根据实际需求灵活调整。