nuke-mask

2.3.12 • Public • Published

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() : 关闭浮层

Package Sidebar

Install

npm i nuke-mask

Weekly Downloads

25

Version

2.3.12

License

Apache-2.0

Unpacked Size

45.4 kB

Total Files

11

Last publish

Collaborators

  • doub
  • leanhunter