ElementUI messagebox 自定义配置内容中使用

近日在开发中遇到一个需求，需要在messagebox中使用switch开关，代码如下：
全局弹窗定义：

export default {
  install(Vue){
    Vue.prototype.$deleteConfirm = function() {
      const h = this.$createElement;
      this.$msgbox({
        title: "删除",
        message: h("div", [
          h('span', "是否确定删除"),
          h('el-switch', {
            props: {
              value: true,
            },
            on: {
              change(checked) {
                console.log("checked", checked)
              }
            }
          })
        ])
      })
    }
  }
}

使用：

<template>
  <div class="hello">
    <el-button @click='opendialog'>打开弹窗</el-button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    opendialog() {
      this.$deleteConfirm()
    }
  }
}
</script>

结果发现在页面里，switch开关点击时无法切换

1666003229162.png

尝试各种方法都无法解决，后来发现el-switch v-model 绑定的值必须是可响应的，所有只能将el-switch再封装成组件使用。
switch 封装：

<template>
  <el-switch v-model="value" @change="change"></el-switch>
</template>

<script>
export default {
  name: "DeleteConfirmSwitch",
  data() {
    return{
      value: true
    }
  },
  methods: {
    change(checked){
      this.$emit("change", checked)
    }
  }
}
</script>

switch 使用：

import DeleteConfirmSwitch from "@/components/DeleteConfirmSwitch";
export default {
 install(Vue){
   Vue.component("delete-confirm-switch", DeleteConfirmSwitch)
   Vue.prototype.$deleteConfirm = function() {
     const h = this.$createElement;
     this.$msgbox({
       title: "删除",
       message: h("div", [
         h('span', "是否确定删除"),
         h('delete-confirm-switch', {
           on: {
             change(checked) {
               console.log("checked", checked)
             }
           }
         })
       ])
     })
   }
 }
}

处理过后恢复正常。