modal 弹窗

本弹窗是作为其他弹层类组件的基础封装,支持很多特性

Props参数

名称	类型	是否必传	默认值	描述
visible	boolean	✅	-	是否显示
mask	boolean	否	-	是否开启蒙层
animationType	MMModalAnimationType	否	-	动画类型
maskClosable	boolean	否	-	点击蒙层是否关闭
justifyContent	MMModalJustifyContent	否	-	内容排列方式
className	string	否	-	样式表
onClose	() => void	否	-	关闭回调

示例

import { useState } from 'react'
import MMButton from '~/components/button'
import { MMModalAnimationType, MMModalJustifyContent } from '~/components/modal/const'
import MMModal, { IMMModalProps } from '~/components/modal/index'
import MMPageContainer from '../_components/page-container'
import MMCard from '~/components/card'
import PageDemoBlock from '../_components/page-demo-block'

export default () => {
  const [visible, setVisible] = useState(false)
  const [props1, setProps1] = useState<Partial<IMMModalProps>>({
    maskClosable: true
  })
  const [visibleTransparent, setVisibleTransparent] = useState(false)
  const [visibleProps, setVisibleProps] = useState(false)

  return (
    <MMPageContainer title="弹窗">
      <PageDemoBlock title="使用">
        <MMButton onClick={() => setVisible(true)} text="基础弹窗" />
        <MMButton
          onClick={() => setProps1((pre) => ({ ...pre, maskClosable: !pre.maskClosable }))}
          text={props1.maskClosable ? '允许遮罩关闭' : '不允许遮罩关闭'}
        />
        <MMModal {...props1} visible={visible} onClose={() => setVisible(false)}>
          <MMCard onClick={() => setVisible(false)}>点我关闭</MMCard>
        </MMModal>
      </PageDemoBlock>

      <PageDemoBlock title="透明弹窗">
        <MMButton onClick={() => setVisibleTransparent(true)} text="透明弹窗" />
        <MMModal visible={visibleTransparent} mask={false}>
          <MMButton onClick={() => setVisibleTransparent(false)} text="关闭弹窗" />
        </MMModal>
      </PageDemoBlock>

      <PageDemoBlock title="透明弹窗">
        <MMButton onClick={() => setVisibleProps(true)} text="弹窗属性" />
        <MMModal visible={visibleProps} maskClosable animationType={MMModalAnimationType.down} justifyContent={MMModalJustifyContent.flexEnd}>
          <MMButton onClick={() => setVisibleProps(false)} text="关闭弹窗" />
        </MMModal>
      </PageDemoBlock>
    </MMPageContainer>
  )
}