@hi-ui/modal v4.1.1
Modal 模态框
模态对话框一般会中断当前任务流,在相对无信息干扰的环境下完成微型任务
何时使用
当前任务中需要中途填写信息或执行别的动作
常见于后台设置、新建编辑等场景
使用示例
Props
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 模态框标题 | string | ReactNode | - | - |
visible | 是否显示模态框 | boolean | true | false | false |
closeable | 是否展示右上角关闭按钮 | boolean | true | false | true |
maskClosable | 是否允许点击蒙层关闭模态框 | boolean | true | false | true |
cancelText | 取消按钮文案 | string | - | '取消' |
confirmText | 确认按钮文案 | string | - | '确定' |
confrimLoading | 确认按钮 loading 状态 | boolean | true |false | - |
size | 模态框尺寸 | string | 'default' | 'large' | 'default' |
style | 自定义模态框样式 | object | - | - |
footer | 自定义模态框底部 | ReactNode | null | - | - |
Events
名称 | 说明 | 类型 | 参数 | 返回值 |
---|---|---|---|---|
onConfirm | 确认事件触发时的回调 | () => void | - | - |
onCancel | 取消事件触发时的回调 | () => void | - | - |
Methods
Modal.confirm({onConfirm, onCancel, title, content, type, confirmText, cancelText})
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
onConfirm | 确认事件触发时的回调 | () => void | - | - |
onCancel | 取消事件触发时的回调 | () => void | - | - |
title | confirm 的标题 | string | - | string |
content | confirm 的内容 | string | - | - |
type | confirm 的类型 | string | 'default' | 'success' | 'error' | 'warning' | 'info' | 'default' |
cancelText | 取消按钮文案 | string | - | '取消' |
confirmText | 确认按钮文案 | string | - | '确定' |
CHANGELOG
参数 | 变更类型 | 变更内容 | 解决的问题 |
---|---|---|---|
size | update | 枚举值改变 | |
closeIcon | feature | ||
timeout | feature | ||
disabledPortal | feature | ||
container | feature | ||
onExited | feature | ||
onClose | feature | ||
showHeaderDivider | feature | ||
showFooterDivider | feature | ||
preload | feature | ||
unmountOnClose | feature | ||
width | feature | ||
height | feature | ||
innerRef | feature | ||
maskClosable | deprecated | ||
lockScroll | feature | ||
autoFocus | feature | ||
focusElementOnClose | update | 修复单词拼写错误 | |
trapFocus | feature | ||
returnFocusOnClose | feature |
Modal.confirm
点击蒙层不允许关闭
27 days ago
1 month ago
4 months ago
6 months ago
6 months ago
9 months ago
6 months ago
6 months ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago