联系我

Basic

Mask蒙层

统一的蒙层组件，常用于弹窗、引导等场景。

返回组件列表GitHub 文档

统一的蒙层组件，常用于弹窗、引导等场景。

示例图

Mask

基础用法

页面 .json 文件 usingComponents 中引入组件

// json
{
    "usingComponents": {
        "mx-mask": "/components/mxwui/mask/index"
    }
}

页面 .wxml 文件中使用组件

<mx-mask visible="{{true}}" />

更多用法示例

是否显示蒙层 visible

属性：visible，默认 false 不显示。必填字段。

  • 显示
<mx-mask visible />

<mx-mask visible="{{true}}" />
  • 不显示
<mx-mask visible="{{false}}" />

<mx-mask />

设置透明度 opacity

属性：opacity，默认 0.6，可选值范围 0-1。

<mx-mask opacity="0.8" />

层级 zIndex

属性：zIndex，默认 520，数字。

<mx-mask visible="{{true}}" zIndex="10" />

蒙层点击事件

事件：bind:mask_tap，点击事件

<mx-mask bind:mask_tap="handleClick" />

参数

参数 类型 必填 可选值 默认值 参数描述
visible Boolean 是 true、false false 蒙层是否显示
opacity Number 0-1之间 0.6 蒙层透明度
zIndex Number 数字 520 蒙层层级
lockScroll Boolean true、false true 是否锁定页面滚动，防止穿透

事件

事件名称 类型 返回值 事件说明
bind:mask_tap Click 蒙层点击事件

其他说明

弹窗显示时，Mask 默认会锁定页面滚动（lockScroll，默认 true），避免滑动弹层内容时带动蒙层下方的页面。多层弹窗通过引用计数正确嵌套锁定/解锁。