Overlay 遮罩层

介绍

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

引入

app.jsonindex.json中引入组件,详细介绍见快速上手

  1. "usingComponents": {
  2. "van-overlay": "path/to/@vant/weapp/dist/overlay/index"
  3. }

代码演示

基础用法

  1. <van-button type="primary" bind:click="onClickShow">显示遮罩层</van-button>
  2. <van-overlay show="{{ show }}" bind:click="onClickHide"/>
  1. Page({
  2. data: {
  3. show: false
  4. },
  5. onClickShow() {
  6. this.setData({ show: true });
  7. },
  8. onClickHide() {
  9. this.setData({ show: false });
  10. }
  11. });

嵌入内容

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

  1. <van-button type="primary" bind:click="onClickShow">嵌入内容</van-button>
  2. <van-overlay show="{{ show }}" bind:click="onClickHide">
  3. <view class="wrapper">
  4. <view class="block" catch:tap="noop" />
  5. </view>
  6. </van-overlay>
  1. Page({
  2. data: {
  3. show: false
  4. },
  5. onClickShow() {
  6. this.setData({ show: true });
  7. },
  8. onClickHide() {
  9. this.setData({ show: false });
  10. },
  11. noop() {}
  12. });
  1. .wrapper {
  2. display: flex;
  3. align-items: center;
  4. justify-content: center;
  5. height: 100%;
  6. }
  7. .block {
  8. width: 120px;
  9. height: 120px;
  10. background-color: #fff;
  11. }

Props

参数说明类型默认值版本
show是否展示遮罩层booleanfalse-
z-indexz-index 层级string | number1-
duration动画时长,单位秒string | number0.3-
class-name自定义类名string--
custom-style自定义样式string--

Events

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

Slots

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

Overlay 遮罩层 - 图1