Modal

在保留当前页面状态的情况下，告知用户并承载相关操作

基础使用

function App() {
  const [visible, setVisible] = useState(false)
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => setVisible(true)}>点击</Button>
      <Modal
        visible={visible}
        header='模态窗口'
        position='center'
        showCloseIcon={true}
        showMark={true}
        onClose={() => setVisible(false)}
      >
        <div style={{ width: 420, padding: 20 }}>这是一个模态窗口</div>
      </Modal>
    </div>
  );
}

显示遮罩层

• showMark : 为true则显示遮罩层，默认为 true
• closeOnMark: 为true则点击遮罩层关闭弹窗，默认为 true

function App() {
  const [visible, setVisible] = useState(false)
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => setVisible(true)}>点击</Button>
      <Modal
        visible={visible}
        header='模态窗口'
        position='center'
        showCloseIcon={true}
        showMark={true}
        closeOnMark
        onClose={() => setVisible(false)}
      >
        <div style={{ width: 420, padding: 20 }}>这是一个模态窗口</div>
      </Modal>
    </div>
  );
}

自定义 footer header

• footer : 为 null 时则不显示
• header : 为 null 时则不显示

function App() {
  const [visible, setVisible] = useState(false)
  const footer = (
    <div style={{ display: 'flex', padding: 16 }}>
      <div style={{ flex: 1, lineHeight: '36px' }}>install</div>
      <div>
        <Button type="default" onClick={() => setVisible(false)}>reset</Button>
        <Button style={{ marginLeft: 20 }}>confirm</Button>
      </div>
    </div>
  )
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => setVisible(true)}>点击</Button>
      <Modal
        visible={visible}
        header='自定义footer'
        position='center'
        footer={footer}
        showCloseIcon
        showMark={true}
        style={{ width: 420 }}
        onClose={() => setVisible(false)}
      >
        <div style={{ width: 420, padding: 20 }}>这是一个模态窗口</div>
      </Modal>
    </div>
  );
}

定义 footer 按钮文本

• cancelText : 取消按钮的文本
• onCancel : 取消按钮的回调函数
• confirmText : 确定按钮的文本
• onConfirm : 定按钮的回调函数

function App() {
  const [visible, setVisible] = useState(false)
  return (
    <div className="ykui-demo-row">
      <Button type="default" onClick={() => setVisible(true)}>点击</Button>
      <Modal
        visible={visible}
        header='模态窗口'
        position='center'
        showCloseIcon={true}
        showMark={true}
        onClose={() => setVisible(false)}
        cancelText="cancelText"
        confirmText="confirmText"
      >
        <div style={{ width: 420, padding: 20 }}>这是一个模态窗口</div>
      </Modal>
    </div>
  );
}

Modal API

属性	说明	类型	默认值
defaultVisible	初始值时是否显示	boolean	false
visible	是否显示	boolean	false
children	显示的主体内容	ReactNode〡Function	--
showMark	是否显示遮罩层	boolean	true
closeOnMark	点击遮罩层是否关闭弹窗	boolean	true
closeOnEsc	按下Esc可以关闭窗口	boolean	true
onClose	关闭弹窗函数	Function	--
style	内容的样式	Object	--
modalStyle	边框的样式	Object	--
footer	自定义footer,为null则不显示footer	ReactNode	--
showCloseIcon	是否显示关闭按钮	boolean	true
header	标题,为null则不显示header	ReactNode	--
full	是否高度100%，中间可滚动	boolean	false
confirmText	确认按钮文本	string	确定
cancelText	取消按钮文本	string	取消
onCancel	取消按钮的回调函数	Function	--
onConfirm	确定按钮的回调函数	Function	--
confirmNotClose	确定按钮回调函数不关闭弹窗	boolean	false
hideCancel	是否隐错取消按钮	boolean	false
hideConfirm	是否隐错确定按钮	boolean	false
modalClassName	modal类名	any	--
className	内容类名	string	--
position	组件显示位置	left〡right〡center〡top〡bottom	center
container	挂载节点的位置	any	--