# Backdrop 遮罩层

概述

Backdrop 遮罩层，在组件中设置显示蒙层。

以下介绍两种常用的引入方式。

第一种：在页面json文件中引入

{
  "navigationBarTitleText": "遮罩层",
  "usingComponents": {
    "fui-backdrop": "/components/firstui/fui-backdrop/fui-backdrop"
  }
}

1
2
3
4
5
6

第二种：在根目录app.json文件中全局引入

"usingComponents": {
    "fui-backdrop": "components/firstui/fui-backdrop/fui-backdrop"
  }

1
2
3

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 show 属性设置遮罩层显示隐藏，closable 属性设置是否可以点击遮罩层进行关闭。

<!--closable为true时click事件才生效-->
<fui-backdrop show="{{show}}" closable bindclick="close"></fui-backdrop>

1
2

插槽名称	说明
default	标签内部自定义内容

属性名	类型	说明	默认值	其他说明
show	Boolean	是否显示遮罩层	false	-
background	String	遮罩层背景颜色	-	若值为空，可通过css变量（--fui-bg-color-mask）改变背景颜色
absolute	Boolean	是否绝对定位，默认为固定定位fixed	false	-
zIndex	Number	遮罩层z-index值	999	-
closable	Boolean	是否可点击遮罩层，设为true后点击事件生效	false	-

事件名	说明	回调参数
bind:click	点击遮罩层且closable设为true时触发	-