taro/src/components/layout/Modal.tsx

import { View, Text } from '@tarojs/components'
import './Modal.scss'
import React from 'react';
import { ModalType } from '@/utils/types';
import Box from './Box';

export default function Modal(props: {
    children: React.ReactNode,
    testInfo?: React.ReactNode,
    title?: string, dismiss: Function,
    confirm: Function,
    themeColor?: string,
    modalType?: ModalType
}) {

    //阻止中间内容点击事件穿透
    function click(e) {
        e.stopPropagation();
    }

    switch (props.modalType) {
        case ModalType.center:
            return <View className='modal modal_center_container' catchMove onClick={() => props.dismiss()}>
                <View className='center_modal_detail'>
                    <Box><View onClick={click}>
                        {
                            props.children
                        }
                    </View>
                    </Box>
                </View>
            </View>
    }
    return <View className='modal' catchMove>

        <View style={{ flex: 1 }} onClick={() => props.dismiss()}>
            {
                props.testInfo ? props.testInfo : null
            }
        </View>
        <View className='modal_bottom_content'>
            {/* <Text className='modal_title' style={{ color: color }}>{props.title ? props.title : '测试标题 '}</Text> */}
            {
                props.children
            }
            {/* <View className='modal_operate'>
                <View className='modal_btn' style={{ backgroundColor: color+alpha }} onClick={() => props.dismiss()}>
                    <Text className='modal_cancel_text' style={{color:color}}>取消</Text>
                </View>
                <View className='btn_space' />
                <View className='modal_btn' style={{ backgroundColor: color }} onClick={() => props.confirm()}>
                    <Text className='modal_confirm_text' style={{color:'#000'}}>确定</Text>
                </View>


            </View> */}
        </View>

    </View>
}