Taro自定义模态框（modal）

创建组件 myModal文件夹然后新建index.tsx以及index.scss
1, index.tsx

import Taro, {useState, useEffect} from "@tarojs/taro"
import { View} from '@tarojs/components'
import {ITouchEvent} from '@tarojs/components/types/common'
import './index.scss'

interface MyModalProps {
status: boolean
title?: string
closeBtn?: boolean
closeBtnText?: string
confirmBtn?: boolean
confirmBtnText?: string
handleClose: (e: ITouchEvent) => void
handleConfirm: (e: ITouchEvent)=> void
}
const MyModal: Taro.FC<MyModalProps> = (props) => {
const [closeBtn, setCloseBtn] = useState(true)
const [confirmBtn, setConfirmBtn] = useState(true)
useEffect(() => {
if(props.closeBtn != undefined) {
setCloseBtn(props.closeBtn)
}
if(props.confirmBtn != undefined) {
setConfirmBtn(props.confirmBtn)
}
}, [props])
return (<View className='modalImportant' style={props.status? {display: 'flex'}: {display: 'none'}}>
<View className='modalContent'>
<View className='modalHeader'>{props.title?props.title:'提示'}</View>
<View className='modalBody'>{props.children}</View>
<View className='modalFooter'>
<View className={closeBtn?'footerItem':'footerItem hide'}
style={confirmBtn && closeBtn?{borderRight: '1px solid #d2d2d2;'}:{}}
onClick={e => props.handleClose(e)}
>
{props.closeBtnText?props.closeBtnText:'关闭'}
</View>
<View className={confirmBtn?'footerItem footerColor':'footerItem hide'}
onClick={e => props.handleConfirm(e)}
>
{props.confirmBtnText?props.confirmBtnText:'确认'}
</View>
</View>
</View>
</View>
)
}

export default MyModal

2,index.scss

.modalImportant{
position: absolute;
z-index: 1;
width: 100vw;
height: calc(100vh - 194px);
background-color: rgba(0,0,0,0.4);
display: flex;
justify-content: center;
align-items: center;
top: 0;
.modalContent{
width: 75vw;
background-color: #fff;
border-radius: 10px;
padding: 16px;

}
.modalHeader{
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    padding-bottom: 10px;
    color: #1A82D2;
}
.modalBody,.modalFooter{
    padding: 8px 20px;
    font-weight: 600;
}
.modalFooter{
    display: flex;
    align-items: center;
    border-top: 2px solid #d2d2d2;
    .footerItem{
        flex: 1;
        text-align: center;
    }
    .footerColor {
        color: #1A82D2;
    }
}
.hide{
    display: none;
}

}

3,组件引入
import MyModal from '../../../components/MyModal'
...
const [isImportant, setIsImportant] = useState(false) // 模态框
<MyModal
status={isImportant}
handleClose={e => {
Taro.switchTab({
url: '/pages/me/index'
}).then(() => {
console.log('成功跳转到我的页面成功')
})
}}
handleConfirm={e => {setIsImportant(false);confirmOrder()}}
title='重要提示'
confirmBtn={true}
closeBtnText='去补充'
confirmBtnText='先接单'
>
<View className='modalItem'>contant</View>
</MyModal >