1.0.3 • Published 6 years ago
@beisen/enhance-modal v1.0.3
enhance-modal
@beisen/enhance-modal
概述
封装了常用的交互，包含错误提示、加载等常见场景
参数
| 参数 | 说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| loading | 是否显示加载小太阳 | boolean | -- | 否 |
| children | 自定义内容 | ReactNode | -- | 否 |
| onClose | 关闭执行回调 | function | -- | 否 |
| onConfirm | 点击确认执行回调 | function | -- | 否 |
| containerClassName | 内部容器自定义样式 | string | -- | 否 |
其他可以参考Modal组件
API
| 名称 | 说明 | 类型 | 默认值 | 是否必传 |
|---|---|---|---|---|
| showError | 显示错误提示，接受一个对象类型参数，可以看Message组件的props | function | -- | 否 |
| showSuccess | 显示成功提示, 同showError | function | -- | 否 |
| showWarning | 显示警告提示, 同showError | function | -- | 否 |
| showInfo | 显示信息类提示, 同showError | function | -- | 否 |
demo
import React, { useEffect, useState, useRef } from 'react';
import EnhanceModal from '../../src';
export default ()=>{
const [ visible, setVisible ] = useState(false);
const [ loading, setLoading ] = useState(true);
const modalRef = useRef();
const onClose =()=>{
setVisible(false);
}
const onConfirm=()=>{
modalRef.current.showError({
message: '交换机啊'
});
}
useEffect(()=>{
setTimeout(()=> {
setLoading(false);
}, 3000)
}, []);
return (
[
<button onClick={()=>{
setLoading(true);
setVisible(true);
setTimeout(()=> {
setLoading(false);
}, 3000)
}}>
显示
</button>,
<EnhanceModal title="测试" loading={loading} ref={modalRef} visible={visible} onClose={onClose} onConfirm={onConfirm} >
fdsafdsfddsafdsf
fdsafdsafdasfdsafds
</EnhanceModal>
]
)
}