MMPopup 弹层

从设备底部弹出一个弹层

Props

IMMPopupProps

属性	类型	默认值	必传	说明
title	ReactNode		否	标题
subTitle	string		否	副标题
footer	ReactNode		否	自定义渲染 footer
contentStyle	CSSProperties		否	样式
footerStyle	CSSProperties		否	底部样式
titleAlign	'left' | 'center'	center	否	标题对齐方式
close	boolean	true	否	是否显示右上角关闭按钮
backgroundColor	CSSProperties['backgroundColor']		否	设置弹窗背景色
noPlace	boolean	false	否	是否关闭
noDivider	boolean	false	否	title

代码示例

import { FC, memo, PropsWithChildren, useState } from "react";
import { View, Button, Text } from "@tarojs/components";
import MMPopup from "../../components/popup";
import MMNavigation from "../../components/navigation";

interface IOverlayProps {}

/**
 * Overlay 遮罩层
 *
 * 创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
 */
const Component: FC<PropsWithChildren<IOverlayProps>> = (props) => {
  const [visible, setVisible] = useState(false);

  return (
    <View>
      <MMNavigation>Popup</MMNavigation>
      <MMPopup
        title="标题"
        subTitle="副标题"
        visible={visible}
        onClose={() => setVisible(false)}
      >
        <View style={{}} onClick={() => setVisible(false)}>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
          <View style={{ height: 100 }}>
            <Text>1111</Text>
          </View>
        </View>
      </MMPopup>

      <Button onClick={() => setVisible((pre) => !pre)}>显示Popup</Button>
    </View>
  );
};

const MMPopupPage = memo(Component);
export default MMPopupPage;