elementui messagebox 自定义

elementUI的messageBox组件可以通过自定义插件来实现。首先，你可以在JS代码中使用`this.$createElement`来创建自定义的元素，通过传入不同的参数来定制消息框的内容。你可以设置消息框的标题、消息内容、是否显示取消按钮等。通过`beforeClose`方法可以在关闭消息框之前执行一些操作，比如确认按钮被点击时的回调函数。在then方法中，你可以根据不同的操作动作来显示不同的提示消息。在catch方法中，可以处理取消操作的逻辑。CSS代码可以用于控制消息框内元素的样式。

在第二个引用中，你可以看到一个示例的源码，通过点击按钮来打开消息框。消息框的内容可以使用`h`函数来创建自定义的VNode元素。beforeClose方法中可以实现一些操作，比如点击确认按钮后的loading效果。根据用户的操作动作，可以显示不同类型的提示消息。

总的来说，通过自定义插件，你可以实现自己的elementUI messagebox，定制化消息框的样式和功能，以满足你的需求。

相关问题

elementui messagebox

ElementUI的messagebox是一个弹出框组件，用于显示提示信息、警告信息、错误信息等。它可以自定义标题、内容、按钮等，并支持多种类型的弹出框样式。使用messagebox可以方便地向用户展示重要的信息，提高用户体验。

elementui使用MessageBox 弹框自定义内容$msgbox：实现循环生成一个多选框

你可以使用MessageBox的自定义内容功能来实现循环生成多选框。具体实现步骤如下：

1. 在MessageBox中使用自定义内容，可以通过设置属性customClass来指定弹框内容的样式类名，然后在该样式类中添加自定义内容。

2. 在自定义内容中通过v-for指令循环生成多选框，例如：

<template v-for="(item, index) in options">
  <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
</template>

其中，options为一个包含多选框选项的数组，每个选项包含label和value两个属性。

3. 在MessageBox的配置选项中，通过设置showCancelButton和showConfirmButton来隐藏默认的取消和确定按钮，然后添加自定义按钮来提交用户选择的多选框内容。

完整代码示例如下：

this.$msgbox({
  title: '请选择',
  customClass: 'my-msgbox',
  showCancelButton: false,
  showConfirmButton: false,
  message: `
    <div v-for="(item, index) in options">
      <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
    </div>
  `,
  beforeClose: (action, instance, done) => {
    if (action === 'confirm') {
      const checkedValues = instance.$el.querySelectorAll('.el-checkbox__input.is-checked')
      const selectedOptions = []
      checkedValues.forEach((value) => {
        selectedOptions.push(value.previousElementSibling.textContent)
      })
      // 将用户选择的多选框内容提交给后端处理
      console.log(selectedOptions)
    }
    done()
  }
})

其中，beforeClose是一个回调函数，当用户点击确定或取消按钮时会触发该函数。在该函数中，可以通过instance.$el来获取MessageBox的DOM元素，然后使用querySelectorAll方法获取所有被选中的多选框，最后将选中的多选框内容提交给后端处理。