lm-mask

# mask * 作者：niuguimin * 邮箱：15275151030@163.com * 版本：**`1.0.0`** ## 介绍 mask蒙层 ## 安装 `lm-*` 组件使用 `npm` 进行管理，命名空间统一为 `lm-`，请使用以下命令进行组件安装。 ``` npm i lm-mask --save ``` - 如果你还没有安装 `npm`，可通过以下方式进行 [安装](https://nodejs.org/en/download/)。 - 安装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](https://github.com/lm-component/portal)的参数，见配置参数后三属性 - mask内组件需要阻止冒泡,否则会触发onMaskClick ## 开发调试进入项目目录后，使用 `node` 命令启动服务 ``` npm run start ``` 打包发布可通过 `node` 命令执行 ``` npm run build npm publish ``` ## 相关资料 * [lm 组件开发规范](http://) ## 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 ---