模态框

对于简单的添加、编辑等页面,你可以使用弹窗的方式来显示内容。dux-refine 的模态框组件使用了 TDesign Dialog 进行了封装,并支持异步加载组件。

引入组件

import { Modal } from '@duxweb/dux-refine'

普通弹窗

你可以通过将一个元素设置为触发器,点击该元素时弹出一个窗口来显示子组件的内容。

<Modal
  title='标题'
  trigger={<Button>打开</Button>}
>
  弹窗内容
</Modal>

异步弹窗

通过使用 component 参数,你可以异步加载子组件。当弹窗被打开时,子组件会被渲染。

<Modal
  title='标题'
  trigger={<Button>打开</Button>}
  component={() => import('./save')}
></Modal>

同时,你可以在子组件中使用 useModal 上下文钩子来关闭当前的弹窗等操作。

import { useModal } from '@duxweb/dux-refine'

const modal = useModal()
modal.close()

在弹窗的内容中,你可以使用 Footer 组件来布局底部的组件。

<Modal.Footer>
  <Button onClick={() => modal.close()}>关闭<Button>
</Modal.Footer>

组件参数

titlestring
undefined
弹窗的标题。
triggerReactElement
undefined
触发弹窗的组件或元素,该组件需要支持 onClick 事件。
childrenReactNode | ((close: () => void) => ReactNode)
undefined
弹窗的子组件内容或一个回调组件。
component() => Promise<{ default: ComponentType<any> }>
undefined
异步组件的导入回调。
componentPropsRecord<string, any>
undefined
传递给异步组件的参数。
defaultOpenboolean
undefined
弹窗的默认打开状态。
openboolean
undefined
弹窗的受控模式状态参数。
onClose() => void
undefined
弹窗关闭时的回调函数。