nuke-mask

Mask

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

---

设计思路

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

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 的样式。

实例方法控制浮层显隐

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

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