# Mask

- category: Components
- chinese: 遮罩层
- type: 基本

---


## 设计思路

Mask 是一个简单的遮罩层，常用于展示上层的对话框、自定义浮层，如图：

<img src="https://img.alicdn.com/tfs/TB1AlB.SFXXXXarXVXXXXXXXXXX-1242-2208.png" width="240" />

Mask 在 native 端封装了 `mask` 组件，在 web 端使用 View + 全屏绝对定位布局进行封装。

**注意** Mask 依赖 aliweex 提供的 mask 组件，因此客户端内需要集成 aliweex sdk。

## API

| 参数         | 说明                                                                                                | 类型     | 默认值        |
| ------------ | --------------------------------------------------------------------------------------------------- | -------- | ------------- |
| style        | 样式object                                                                                          | obj      |
| animate      | 显示时是否开启动画                                                                                  | boolean  | true          |
| effect       | 显示的动画效果，animate = true 时生效，枚举值可选：ease-in,ease-in-out,ease-out,linear,cubic-bezier | string   | 'ease-in-out' |
| maskClosable | 能否点击空白区域关闭                                                                                | boolean  | false         |
| duration     | 动画时长，默认 200（单位是 ms）                                                                     | number   | 200           |
| contentStyle | 内容 style, 如果 Mask 的Children 数量超过1个，可能需要使用。参见如下解释                            | obj      |
| onShow       | 浮层展示后的回调                                                                                    | function |
| onHide       | 浮层隐藏后的回调                                                                                    | function |

### 关于 contentStyle

如果 Mask 标签内部不止 1 个子组件，默认我们会在 children 外面再包一层 View，contentStyle 为了控制这层 View 的样式。

<img src="https://img.alicdn.com/tfs/TB1LYU0kPihSKJjy0FlXXadEXXa-1100-750.png" width="600" />



### 实例方法控制浮层显隐

你可以预埋一个 Mask 节点到 dom 元素中，然后找到 mask 实例，通过实例方法控制浮层显隐。

- this.refs.myMask.show() : 显示浮层
- this.refs.myMask.hide() : 关闭浮层