Taro 封装遮罩层
参数 | 说明 | 类型 | 默认值 | 必填 |
---|---|---|---|---|
show | 是否显示 | boolean | - | 是 |
onClick | 点击的回调函数 | (ITouchEvent) => void | - | 否 |
index.tsx
import { ITouchEvent, View } from "@tarojs/components"
import styles from "./index.module.css"
interface HMaskProps {
show:boolean,
onClick?:(ITouchEvent) => void
}
const HMask : React.FC<HMaskProps> = (props) => {
const {
show,
onClick
} = props
return(
<View
className={styles['mask']}
style={{display:show ? 'block': 'none'}}
onClick={(e:ITouchEvent) => onClick && onClick(e)}
></View>
)
}
export default HMask
index.module.css
.mask {
position: absolute;
width: 100vw;
min-height: 100vh;
height: 100%;
top: 0;
left: 0;
background-color: #000000;
opacity: .7;
z-index: 100;
}