@beisen/enhance-modal

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>

    ]
  )
}