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} = propsreturn(<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;
}

Taro 封装遮罩层相关推荐

Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】
Overlay 遮罩层提供一个简单的 Overlay 遮罩层,在页面上的层级为 1026; 1. 使用指南在 Taro 文件中引入组件,将组件放入src下的components文件夹中 impor ...
如何封装axios请求。统一基地址、加载遮罩层、响应参数优化
gitee地址:https://gitee.com/mengxianchen/axios-request-tool 线上体验地址: http://121.43.41.227:82/ 浏览器网络设 ...
uni-app 遮罩层事件穿透解决办法catchtouchmove
前言: 最近在做遮罩层相关的组件时,发现出现遮罩层后,其比遮罩层层级低的其他组件依然能滑动滚动,这就很无语.后面我尝试通过各种布尔值试图阻断这种情况,后面越做越复杂,逻辑越做越乱.再后来发现了一个专门 ...
element-ui：el-dialog遮罩层变黑
常用的遮罩样式 /* 遮罩层 */ .mo-mask {position: fixed;top: 0;bottom: 0;left: 0;right: 0;width: 100%;height: 10 ...
浏览器调取摄像头拍照并有遮罩层
近来在写一个公众号的项目,因为开发需求,需要调取手机摄像头拍照.最重要的是要有遮罩层,这就限制了不能调用手机自带的摄像头. 项目框架是vue-cli,中间查了很多资料,有用原生js写的(虽然就是用na ...
android 黑色遮罩按钮,打造一个Android的遮罩层SeekBar
简介:所谓遮罩动画,就是利用遮罩的动画原理来实现的.可以看到的动画是遮罩层区域的内容. 说说这个实现原理:原理其实很简单,只要了解android画笔怎么工作的就非常容易理解.一:指定绘制图片或者层的大 ...
iOS自定义相机：带拍摄区域边框、半透明遮罩层、点击屏幕对焦、自动裁剪（含demo源码）
文章目录前言 I.案例1:加一个长方形的框框并裁剪身份证照片(无半透明遮罩层) 1.1 demo 源码 1.2 控制屏幕旋转方向 1.3 封装富文本API 1.4 设置相机预览层和证件框框的fram ...
bootstrap使用Modal,关闭弹框遗留遮罩层
前两天,用公司封装的框架,写了一个弹框,两个弹框操作相隔时间很短,第二个弹框出现遮罩层. // 手动清除 $(".modal-backdrop").remove(); 发现弹框关闭 ...
css 定位及遮罩层小技巧
relative定位:相对它自己的正常位置的定位. fixed定位:fixed定位是指元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会滚动,且fixed定位使元素的位置与文档流无关,因此 ...

Taro 封装遮罩层

Taro 封装遮罩层

Taro 封装遮罩层相关推荐

最新文章

热门文章