mp-colorui/dist/h5/components/drawer/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 { classNames } from "../../lib/index";
export default class ClDrawer extends Taro.Component {
  render() {
    const props = this.props;

    const [showModal, setShowModal] = Taro.useState(props.show);
    Taro.useMemo(() => {
      setShowModal(props.show);
    }, [props.show]);
    const hideModal = () => {
      props.closeWithShadow && setShowModal(false);
      props.onCancel && props.onCancel();
    };
    const leftComponent = <View className={classNames(`cu-modal drawer-modal justify-start ${showModal ? "show" : ""}`, props.className)} style={Object.assign({}, props.style)} onClick={e => {
      hideModal();
      e.stopPropagation();
    }}>
      <View className="cu-dialog basis-lg" onClick={e => {
        e.stopPropagation();
      }} style={{ height: "100vh" }}>
        {this.props.children}
      </View>
    </View>;
    const rightComponent = <View className={classNames(`cu-modal drawer-modal justify-end ${showModal ? "show" : ""}`, props.className)} style={Object.assign({}, props.style)} onClick={e => {
      hideModal();
      e.stopPropagation();
    }}>
      <View className="cu-dialog basis-lg" onClick={e => {
        e.stopPropagation();
      }} style={{ height: "100vh" }}>
        {this.props.children}
      </View>
    </View>;
    const bottomComponent = <View className={classNames(`cu-modal bottom-modal ${showModal ? "show" : ""}`, props.className)} style={Object.assign({}, props.style)} onClick={e => {
      hideModal();
      e.stopPropagation();
    }}>
      <View className="cu-dialog" style={{ maxHeight: "70vh" }} onClick={e => {
        e.stopPropagation();
      }}>
        {this.props.children}
      </View>
    </View>;
    return props.direction === "left" ? leftComponent : props.direction === "right" ? rightComponent : bottomComponent;
  }

}
ClDrawer.options = {
  addGlobalClass: true
};