vue3+elementui plus使用ElMessageBox时中断关闭弹窗

说明

1、通过 proxy.$confirm() 触发弹窗
2、通过 visible: false 让所有逻辑执行都阻止关闭弹窗
3、通过 beforeClose 中调用 done() 方法来执行通过，不通过的逻辑不调用 done()方法就可以了，beforeClose校验会在逻辑处理前调用。

代码

const { proxy } = getCurrentInstance();
const remark = ref(null);
proxy.$confirm(
    h("div",null,{
      default: ()=>[
        h(ElRow, null, {
          default: () => [
            h(ElText, null, { default: () => '是否取消单据：' }),
            h(ElText, {
              type: 'primary',
              size: 'large',
              tag: 'b',
              style: {
                marginRight: '0.5rem',
              }
            }, { default: () => jobno }),
            h(ElText, null, { default: () => '？' }),
          ]
        }),
        h(ElRow, {style:{width:'100%'}}, {
          default: () => [
            h(ElText, {
              style:{
                position: 'relative',
                marginRight: '10px'
              }
            }, {
              default: ()=>[
                h('span', {
                  style:{
                    position: 'relative',
                    marginRight: '3px',
                    top: '3px',
                    color: 'red'
                  }
                }, { default: () => '*' }),
                h('span', null, { default: () => '备注' }),
              ]
            }),
            h("div", null,{
              default: ()=>[
                h(ElInput,{
                  modelValue: remark.value,
                  'onUpdate:modelValue': (val) => {  // 监听更新事件
                    remark.value = val;
                  },
                  rows: 2,
                  autosize: { minRows: 3, maxRows: 4 },
                  clearable: true,
                  placeholder: '',
                  type: 'textarea',
                  style: {
                    marginTop: '0.5rem',
                  }
                })
              ]
            })
          ]
        }),
      ]
    }),'取消单据', {
      type: 'info',
      customClass: 'custom-message-box',
      cancelButtonText: '取消',
      confirmButtonText: '确认',
      beforeClose: async (action, instance, done) => {
		//点击按钮后的校验处理
        if(action === 'confirm'){ //confirm | cancel | close
          const remarkStr = remark.value?.trim();
          //判断备注是否是空的，如果是空的阻止关闭弹窗，并消息提示，其他情况允许弹窗关闭
          if(!remarkStr){
            proxy.$message({ message: '备注不能为空', type: 'warning', duration: 5 * 1000 })
          }else{
            done();
          }
        }else{
          done();
        }
      },
      //callback: (value, action) => {
      //  if(value === 'confirm') {}
      //}
},null,{
  visible: false, //手动控制关闭弹窗
}).then((e)=>{
  console.log("点击确定的处理")
}).catch(action =>{
  if (action === 'cancel' || action === 'close') {
    console.log("点击取消的处理")
  }
});