# 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

---