lementui使用MessageBox 弹框自定义内容$msgbox无法解析

对于 ElementUI 的 MessageBox 弹框，可以通过传入一个 Vue 组件作为参数来自定义弹框的内容。

例如，你可以创建一个 MyMessageBox 组件，然后在调用 MessageBox 时传入这个组件：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="handleConfirm">确定</button>
    <button @click="handleCancel">取消</button>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleConfirm() {
      this.$emit('confirm')
    },
    handleCancel() {
      this.$emit('cancel')
    }
  }
}
</script>

然后在调用 MessageBox 时，将这个组件作为参数传入：

<template>
  <div>
    <el-button @click="showDialog">显示自定义弹框</el-button>
  </div>
</template>

<script>
import MyMessageBox from '@/components/MyMessageBox'

export default {
  components: {
    MyMessageBox
  },
  methods: {
    showDialog() {
      const h = this.$createElement
      const messageBox = this.$msgbox({
        title: '自定义弹框',
        message: h(MyMessageBox, {
          props: {
            message: '确定要执行该操作吗？'
          },
          on: {
            confirm: () => {
              messageBox.close()
              // 执行确认操作
            },
            cancel: () => {
              messageBox.close()
              // 执行取消操作
            }
          }
        }),
        showCancelButton: true,
        showConfirmButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定'
      })
    }
  }
}
</script>

这样就可以实现自定义内容的弹框了。