# Overlay 遮罩层

### 介绍

创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作

### 引入

在`index.config.js中引入组件

```json
"usingComponents": {
  "van-overlay": "@vant/weapp/overlay/index"
}
```

## 代码演示

### 基础用法

```html
<van-button type="primary" onClick={()=>this.onClickShow()} >显示遮罩层</van-button>
<van-overlay show="{{ show }}" onClick={()=>this.onClickHide()} />
```

```js

  state= {
    show: false,
  };

  onClickShow() {
    this.setState({ show: true });
  }

  onClickHide() {
    this.setState({ show: false });
  }

```

### 嵌入内容

通过默认插槽可以在遮罩层上嵌入任意内容

```html
<van-button type="primary" onClick={()=>this.onClickShow()}>嵌入内容</van-button>
<van-overlay show={this.state.show} onClick={()=>this.onClickHide()}>
  <view class="wrapper">
    <view class="block" onTap={()=>this.noop()} />
  </view>
</van-overlay>
```

```js

  state= {
    show: false,
  };

  onClickShow() {
    this.setData({ show: true });
  }

  onClickHide() {
    this.setData({ show: false });
  }

  noop() {}

```

```css
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 120px;
  height: 120px;
  background-color: #fff;
}
```

### 注:属性应用在组件上需要统一使用驼峰式命名，如custom-class应用为
```html
<van-button type="primary" customClass='myClass' size="large">大号按钮</van-button>
```
### Props

| 参数         | 说明             | 类型               | 默认值  | 版本 |
| ------------ | ---------------- | ------------------ | ------- | ---- |
| show         | 是否展示遮罩层   | _boolean_          | `false` | -    |
| z-index      | z-index 层级     | _string \| number_ | `1`     | -    |
| duration     | 动画时长，单位秒 | _string \| number_ | `0.3`   | -    |
| class-name   | 自定义类名       | _string_           | -       | -    |
| custom-style | 自定义样式       | _string_           | -       | -    |

### Events

| 事件名     | 说明       | 回调参数 |
| ---------- | ---------- | -------- |
| bind:click | 点击时触发 | -        |

### Slots

| 名称 | 说明                               |
| ---- | ---------------------------------- |
| -    | 默认插槽，用于在遮罩层上方嵌入内容 |