Mask

2023-03-28 12:11

You can use the mask component to display the pop-up element with a mask.

Sample code

See the sample codes in different languages:

.json

copy

{
  "defaultTitle": "Mask",
  "usingComponents": {
    "mask": "mini-ali-ui/es/mask/index"
  }
}

.axml

copy

<mask type="{{type}}" show="{{show}}" maskZindex="{{maskZindex}}" onMaskTap="maskClick"></mask>

.js

copy

Page({
 data: {
   type: 'market',
   maskZindex: 10,
 },
 maskClick() {
   if (this.data.type === 'market') {
     this.setData({
       type: 'product',
     });
   } else {
     this.setData({
       type: 'market',
       show: false,
     });
   }
 },
});

Parameters

Property	Type	Description
type	String	The mask with different opacity. Valid values are: `product`: the pop-up element to display information about the product, with the opacity value of 0.55. `market`: the pop-up element to display information about the marketing, with the opacity value of 0.75. The default value is `product`.
maskZindex	Number	The z-index property of the customized mask.
show	Boolean	An indicator of whether to display the mask.
onMaskTap	EventHandle	The event that is triggered when users tap the mask. The default value is `() => { }`.
fixMaskFull	Boolean	An indicator of whether to solve the incomplete display of the mask affected by transformation. The default value is `false`.