Taro React组件使用（1） —— Overlay 遮罩层【渐入渐出动画遮罩层】

Overlay 遮罩层

---

提供一个简单的 Overlay 遮罩层，在页面上的层级为 1026;

1. 使用指南

在 Taro 文件中引入组件，将组件放入src下的components文件夹中

import RuiOverlay from "../../components/RuiOverlay/RuiOverlay";

2. 基础用法

2.1 组件使用

{/* 基本案例 */}
 { this.setState({ isShowBase: false }) }} />

2.2 显示遮罩层

 { this.setState({isShowBase: true}) }}>
  基本案例
  

3. 嵌入内容居中

3.1 组件使用

{/* 嵌入内容居中 */}
 { this.setState({isShowContent: false}) }}>
  123456

3.2 显示遮罩层

 { this.setState({isShowContent: true}) }}>
  嵌入内容居中
  

4. 嵌入内容底部

4.1 组件使用

{/* 嵌入内容底部 */}
 { this.setState({isShowBottom: false}) }}>
  123456

4.2 显示遮罩层

 { this.setState({isShowBottom: true}) }}>
  嵌入内容底部
  

5. 设置透明度

5.1 组件使用

{/* 设置透明度 */}
 { this.setState({isShowOpacity: false}) }}
  opacity="0.5" />

5.2 显示遮罩层

 { this.setState({isShowOpacity: true}) }}>
  设置透明度
  

6. 设置动画时间

6.1 组件使用

{/* 设置动画时间 */}
 { this.setState({isShowDuration: false}) }}/>

6.2 显示遮罩层

 { this.setState({isShowDuration: true}) }}>
  设置动画时间
  

7. RuiOverlay 参数

参数	说明	类型	可选值	默认值
isOpened	是否显示遮罩层	Boolean	-	false
zIndex	页面上的层级	Number	-	1026
opacity	遮罩层的透明度	Number	-	0.4
position	内容所在位置	String	top、left、right、bottom、center	center
duration	渐入渐出动画时长	Number	-	300

8. RuiOverlay 事件

事件名称	说明	返回参数
onClose	触发关闭时的事件	-