美文网首页
ElementUI messagebox 自定义配置内容中使用

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

作者: 希硕 | 来源:发表于2022-10-16 19:01 被阅读0次

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

    处理过后恢复正常。

    相关文章

      网友评论

          本文标题:ElementUI messagebox 自定义配置内容中使用

          本文链接:https://www.haomeiwen.com/subject/rpddzrtx.html