MMOverlay 遮罩层

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。

Props

IOverlayProps

属性	类型	默认值	必传	说明
visible	boolean		是	是否显示
coverView	boolean		否	是否启用 coverView
maskColor	boolean		否	是否显示遮罩颜色
catchTouchMove	boolean		否	是否以
onClick	() => void		否	点击蒙层事件

代码示例

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

interface IOverlayProps {}

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

  return (
    <View>
      <MMNavigation>蒙层</MMNavigation>
      <MMOverlay visible={visible} onClick={() => setVisible(false)}>
        <View
          style={{ width: 100, height: 100, backgroundColor: "#ffffff" }}
          onClick={() => setVisible(false)}
        >
          1111
        </View>
      </MMOverlay>

      <Button onClick={() => setVisible((pre) => !pre)}>显示蒙层</Button>

      <Button
        onClick={() => setVisible((pre) => !pre)}
        style={{ marginTop: 1000 }}
      >
        显示蒙层
      </Button>
    </View>
  );
};

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