IDuxFE/idux

[comp:modal ]useModal模式下,自定义footer的按钮没有loading效果

lyyzhh opened this issue · 2 comments

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

What problem does this feature solve?

useModal模式下,自定义footer的按钮没有快捷的启动loading的方式,对于需要先异步请求再关闭弹窗的场景,无法满足

What does the proposed API look like?

类似现有okBtn、cancelBtn的逻辑(onOk内返回Promise),对自定义footer的按钮封装loading,或者支持footer内传入ref变量自定义控制。

Translation of this issue:

[Comp: MODAL] Usemodal mode, the custom FOOTER button does not have a loading effect

What proplem does this feature solver?

Under the USEMODAL mode, the custom Footer button does not quickly start the loading method. For the scene that needs to be closed asynchronous and then close the pop -up window, it cannot satisfy

What does the proposed api look like?

Similar to the existing OKBTN and Cancelbtn logic (return promise within Onok), the custom Footer button encapsulates Loading, or supports the C customized control of the REF variable in the FOOTER.

const openModal = () => {
  const asyncButton: ModalButtonProps = reactive({
    text: 'My Ok',
    loading: false,
    mode: 'primary',
    onClick: () => {
      asyncButton.loading = true
      setTimeout(() => {
        asyncButton.loading = false
        modalRef.ok()
      }, 1000)
    },
  })
  const modalRef = confirm({
    title: 'Customize footer via footer',
    content: h('p', 'Some contents...'),
    footer: [
      {
        text: 'My Cancel',
        onClick: () => modalRef.cancel(),
      },
      asyncButton,
    ],
  })
}

参考上面的代码,使用 reactive 对 buttonProps 包一层就可以实现你的需求了。