Backdrop 遮罩层

用于覆盖页面内容，可通过点击事件通知父组件关闭遮罩。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 点击遮罩后更新显示状态 -->
<fui-backdrop :show="showMask" closable @click="showMask = false" />

在页面数据中声明 showMask，通过改变该值控制显示。

属性

属性	类型	说明	官网默认值
show	Boolean	是否显示遮罩	false
background	String	遮罩背景色	rgba(0, 0, 0, 0.6)
absolute	Boolean	是否使用绝对定位，否则使用固定定位	false
full	Boolean	根元素下绝对定位时是否铺满屏幕，仅 nvue 有效	false
zIndex	Number	遮罩层级，nvue 不支持	980
closable	Boolean	是否允许点击遮罩触发事件	false

事件

事件	说明	回调参数
click	closable 为 true 时点击遮罩触发，由父组件更新 show	无

插槽

插槽	说明
default	遮罩内部内容

平台说明

非 nvue 平台本地 background 属性默认为空，可通过 --fui-bg-color-mask 调整背景。nvue 中元素先后顺序影响层级。