mp-colorui/dist/h5/components/curtain/index.js

MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）

import Nerv from "nervjs";
import { View } from "@tarojs/components";
import Taro from "@tarojs/taro-h5";
import ClIcon from "../icon/index";
import "./index.scss";
import { classNames } from "../../lib/index";
export default class ClCurtain extends Taro.Component {
  render() {
    const props = this.props;

    const { show, closeWithShadow, closeBtnPosition } = props;
    const [showImage, setShowImage] = Taro.useState(show);
    Taro.useMemo(() => {
      setShowImage(show);
    }, [show]);
    return showImage ? <View className={classNames("cu-load load-image", props.className)} style={Object.assign({}, props.style)} onClick={e => {
      e.stopPropagation();
      if (closeWithShadow) {
        setShowImage(false);
        props.onClose && props.onClose();
      }
    }}>
      <View className="cu-curtain__content" onClick={() => {
        props.onClick && props.onClick();
      }}>
        {this.props.children}
        <View className={closeBtnPosition} onClick={e => {
          e.stopPropagation();
          setShowImage(false);
          props.onClose && props.onClose();
        }}>
          <ClIcon iconName="close" color="white" />
        </View>
      </View>
    </View> : <View />;
  }

}
ClCurtain.options = {
  addGlobalClass: true
};
ClCurtain.defaultProps = {
  show: false,
  closeWithShadow: false,
  closeBtnPosition: "bottom",
  onClose: () => {},
  onClick: () => {},
  imgUrl: ""
};