MMModal 弹窗

Props

IMMModalProps

属性	类型	默认值	必传	说明
visible	boolean		是	是否显示
mask	boolean		否	是否开启蒙层
animationType	MMModalAnimationType | keyof typeof MMModalAnimationType		否	动画类型
maskClosable	boolean		否	点击蒙层是否关闭
justifyContent	MMModalJustifyContent | keyof typeof MMModalJustifyContent		否	内容排列方式
className	string		否	样式表
onClose	() => void		否	关闭回调

代码示例

import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import React, { Component } from "react";
import MMButton from "../../components/button";
import {
  IMMModalProps,
  MMModalAnimationType,
  MMModalJustifyContent,
} from "../../components/modal/const";
import MMModal from "../../components/modal/index";
// import MMPopup from '../../components/popup'
import Navigation from "../../components/navigation/index";
import MMCard from "../../components/card";
import { H2 } from "../../components/head";

function init() {
  return {
    visible: false,
    mask: true,
    maskClosable: true,
    justifyContent: "center",
    animationType: "fade",
  } as Partial<IMMModalProps>;
}

export default class Index extends Component<any, any> {
  state = {
    modalProps: init(),
    number: 0,
    mask: true,

    visible: false,
    visibleProps: false,
    visibleAlert: false,
  };

  private popup: any;

  renderButton() {
    return <View>jsx</View>;
  }

  toggle = (data: Partial<IMMModalProps>) => {
    this.setState({ modalProps: { ...init(), ...data } });
  };

  colse = () => {
    this.setState((pre) => ({
      modalProps: { ...pre.modalProps, visible: false },
    }));
  };

  render() {
    const { visible, modalProps, visibleAlert, visibleProps } = this.state;

    console.log(modalProps, "modalProps");

    return (
      <View>
        <Navigation title="弹窗" />
        {/* <MMPopup ref={ref => (this.popup = ref as MMPopup)} /> */}
        <View className="container">
          <MMModal {...modalProps} onClose={() => this.colse()}>
            <View
              style={{ height: 500, backgroundColor: "#ffffff" }}
              onClick={() => {
                // eslint-disable-next-line no-console
                console.log("card");

                this.colse();
              }}
            >
              <Text>基础弹窗（点我关闭）</Text>
            </View>
          </MMModal>

          <H2 text="基础" />
          <View className="spacing" />
          <MMButton
            onClick={() => this.toggle({ visible: true })}
            text="基础弹窗"
          />

          <View className="spacing" />
          <MMButton
            onClick={() => this.toggle({ visible: true, mask: false })}
            text="透明弹窗"
          />

          <H2 text="蒙层" />
          <View className="spacing" />
          <MMButton
            onClick={() => this.toggle({ visible: true, maskClosable: false })}
            text="mask点击不可关闭"
          />

          <H2 text="对齐方式" />
          <View className="spacing" />
          <MMButton
            onClick={() =>
              this.toggle({ visible: true, justifyContent: "flexStart" })
            }
            text="居上"
          />
          <View className="spacing" />
          <MMButton
            onClick={() =>
              this.toggle({ visible: true, justifyContent: "center" })
            }
            text="居中"
          />
          <View className="spacing" />
          <MMButton
            onClick={() =>
              this.toggle({ visible: true, justifyContent: "flexEnd" })
            }
            text="居下"
          />

          <H2 text="动画方式" />
          <View className="spacing" />
          <MMButton
            onClick={() =>
              this.toggle({ visible: true, animationType: "fade" })
            }
            text="fade"
          />
          <View className="spacing" />
          <MMButton
            onClick={() =>
              this.toggle({
                visible: true,
                justifyContent: "flexEnd",
                animationType: "down",
              })
            }
            text="down"
          />
          <View className="spacing" />
          <MMButton
            onClick={() =>
              this.toggle({ visible: true, animationType: "none" })
            }
            text="none"
          />
        </View>
      </View>
    );
  }
}