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

近日在开发中遇到一个需求，需要在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)
              }
            }
          })
        ])
      })
    }
  }
}

使用：

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

1666003229162.png

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

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)
             }
           }
         })
       ])
     })
   }
 }
}

处理过后恢复正常。