Mask

Properties

Property	Type	Default value	Description
maskZindex	string	-	The z-index of the mask layer.
type	'product' | 'market'	'product'	The mask type.
show	boolean	-	Specifies whether to show the mask.
fixMaskFull	boolean	false	Specifies whether to apply a fix for full-screen display. Default value: false.
className	string	-	The custom class name.

Events

Event name	Description	Type
onMaskTap	Triggered when the mask is tapped.	(v: Record<string, any>) => void

CSS variables

CSS variable name

--am-mask-backgroundColor

--am-mask-market-backgroundColor

Style classes

Class name

amd-mask

amd-mask__m

amd-mask__fix

Code examples

Basic usage

Code example for index.axml:

<mask type="{{type}}" show="{{show}}" maskZindex="{{maskZindex}}" onMaskTap="handleClickMask" />
<demo-block title="Basic Usage">
    <view class="btn-list">
        <button data-type="product" onTap="handleClickBtn">Show product type mask</button>
        <button data-type="market" onTap="handleClickBtn">Show market type mask</button>
    </view>
</demo-block>

Code example for index.js:

Page({
  data: {
    type: 'market',
    maskZindex: 10,
    show: false,
  },
  handleClickMask() {
    this.setData({ show: false });
  },
  handleClickBtn(e) {
    const { type } = e.target.dataset;
    this.setData({ type, show: true });
  },
});

Code example for index.json:

{
  "defaultTitle": "Mask",
  "usingComponents": {
    "mask": "antd-mini/es/Mask/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}