lm-mask

mask

• 作者：niuguimin
• 邮箱：[e-mail]
• 版本：1.0.0

介绍

mask蒙层

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-mask --save

• 如果你还没有安装 npm，可通过以下方式进行 安装。
• 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

• 待开发

使用

最少配置参数为：

• 传入内容
• 配置visible和opacity属性

<Mask 
    visible={ this.state.visible }

    opacity={3}

    onMaskClick={()=>this.setState({visible: false})}
>
    <div>This is content</div>
</Mask>

配置参数

Prop	Type	Default	Description
visible	bool	undefined	是否可见
opacity	number	undefined	透明度 0-1
zIndex	number	999	z-index属性
onMaskClick	function	undefined	点击回调

注意事项

• mask外层包裹了lm-protal组件，默认append到body中。
• 可传入protal的参数，见配置参数后三属性
• mask内组件需要阻止冒泡,否则会触发onMaskClick

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.0

1. init

0.1.2

• modify animation name to solve style conflict

0.1.3

• add zIndex prop & modify opacity prop

0.1.4

• remove props time and timeCallback
• optimize animation

0.1.5

• just upgrade version

0.2.1

• upgrade to React 16

0.2.2

• bugfix for huawei mask scroll (by modify css3 animation)

0.2.3

• forbid scroll when mask show

0.2.4

• forbid scroll when mask show & relative bug fix

0.2.5

• bugfix for mask scroll

0.2.7

• update lm-portal for ssr

1.0.0

• Update styles based on new UI

---