Modal.confirm() 点击取消无法关闭

[kortin99]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.2.20

Environment

OS: MacOS 14.2.1
Browser: Chrome 122.0.6261.57
Vue: 3.4.14

Reproduction link

Steps to reproduce

直接使用 3.2.20 文档上 Modal.confirm 的 codesandbox 可复现

What is expected?

点击取消按钮可以正常关闭模态框

What is actually happening?

Modal.confirm 点击取消按钮无反应

[kortin99]

排查依赖版本后发现使用 vue 3.4 会出现此问题，vue 降级至 3.3.x 功能正常

[aibayanyu20]

duplicate #7257
pr #7252

[linpengteng]

Maybe: You can ...

import { createVNode, render } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import ConfirmDialog from 'ant-design-vue/es/modal/ConfirmDialog'

const showConfirm = () => {
  const element = document.createDocumentFragment() as any
  const dialog = createVNode(ConfirmDialog, {
    type: 'confirm',
    visible: true,
    prefixCls: 'ant-modal',
    rootPrefixCls: 'ant',
    contentPrefixCls: 'ant-modal-confirm',
    icon: createVNode(ExclamationCircleOutlined),
    title: '是否确认删除该菜单?',
    content: '删除菜单会导致相关页面丢失，请慎重考虑!',
    okText: '删除',
    okType: 'danger',
    onCancel: () => { dialog.component!.props.visible = false },
    onOk: () => {
       // do some thing
       dialog.component!.props.visible = false
    }
  })

  render(dialog, element)
}

[Secret1007]

排查依赖版本后发现使用 vue 3.4 会出现此问题，vue 降级至 3.3.x 功能正常

我就是3.3.4。。

[doraemonxxx]

i downgrade but it is still the same. this is not because of the vue 3.3.4 version

[kjlamuro]

我也遇到了

[linpengteng]

@kjlamuro Maybe, helpful

• MagicModify
  https://github.com/antd-templater/vue-template-3.x/blob/AntDesignVue3.x/src/configure/presetMagicModify.ts

    import { App, createVNode, isVNode, render } from 'vue'
    import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
    import ConfirmDialog from 'ant-design-vue/es/modal/ConfirmDialog'
    import AModal, { ModalFuncProps } from 'ant-design-vue/es/modal'
  
    /**
     * @Magic Fix the issue
     */
    export default (_: App) => {
      /**
       * fix Modal.confirm not closed bug in vue3.4
       */
      Object.assign(AModal, {
        confirm: (options: ModalFuncProps) => {
          const element = document.createDocumentFragment() as any
  
          const dialog = createVNode(ConfirmDialog, {
            ...options,
            type: 'confirm',
            icon: isVNode(options.icon) ? options.icon : createVNode(ExclamationCircleOutlined),
            visible: true,
            prefixCls: 'ant-modal',
            rootPrefixCls: 'ant',
            contentPrefixCls: 'ant-modal-confirm',
            cancelText: '取消',
            okText: '确认',
            onCancel: async(...rest: any[]) => {
              return Promise.resolve(options.onCancel?.(...rest)).finally(() => {
                dialog.component!.props.visible = false
              })
            },
            onOk: async(...rest: any[]) => {
              return Promise.resolve(options.onOk?.(...rest)).finally(() => {
                dialog.component!.props.visible = false
              })
            }
          })
  
          render(dialog, element)
        }
      })
    }

• Import
  https://github.com/antd-templater/vue-template-3.x/blob/AntDesignVue3.x/src/main.ts

     createApp(App).use(MagicModifyPlugin)

• Usage

    AModal.confirm(...) // support