fs-overlay 遮罩层组件

遮罩层组件，用于创建覆盖整个屏幕的半透明遮罩，常用于弹窗、抽屉等组件的背景。

使用方法

局部引入，在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "fs-overlay": "ava-ui/fxui/fs-overlay/index"
}

代码演示

API

属性

属性名	类型	默认值	说明
visible	Boolean	false	是否显示遮罩层
zIndex	Number	11000	遮罩层级
backgroundColor	String	'rgba(0, 0, 0, 0.7)'	遮罩层背景色
duration	Number	300	动画时长，单位毫秒
preventScrollThrough	Boolean	true	是否阻止滚动穿透
closeOnOverlayClick	Boolean	true	点击遮罩是否触发关闭事件
customStyle	String	''	自定义样式
customClass	String	''	自定义样式类名

事件

事件名	说明	回调参数
click	点击遮罩层时触发（需要closeOnOverlayClick为true）	-
enter	遮罩层进入时触发	-
leave	遮罩层离开时触发	-

插槽

插槽名	说明
default	遮罩层内容

注意事项

1. 滚动穿透: 默认情况下组件会阻止滚动穿透，如需允许可设置 preventScrollThrough="{{false}}"
2. 事件冒泡: 嵌套内容需要使用 catchtap 阻止事件冒泡，避免意外触发遮罩点击事件
3. 层级管理: 合理设置 zIndex 避免层级冲突
4. 动画性能: 动画基于 wx.createAnimation，在低端设备上可能存在性能问题

打开预览