overlay 遮罩层

组件演示

axml

<view class="wrapper" style="background-color:lightblue;">
  <view class="test"></view>
  <x-nav-bar showArrow="{{true}}" title="测试Overlay"></x-nav-bar>
  <view class="content">
    <x-button text="显示遮罩层" onTap="clickOverlayBtn"></x-button>
    <x-overlay show="{{ showOverlay }}" onTap="clickOverlay">
      <view style="height: 200rpx;width: 200rpx;background-color: white;"></view>
    </x-overlay>
  </view>
</view>

json

{
  "usingComponents": {
    "x-nav-bar": "../assembly/nav-bar/nav-bar",
    "x-button": "../assembly/button/button",
    "x-overlay": "../assembly/overlay/overlay"
  },
  "state": {
    "showOverlay": false
  }
}
{
  "usingComponents": {
    "x-dialog": "waft-ui/assembly/dialog/dialog"
  }
}

ts

import { Event, Page, Props, console } from "waft";
import { JSON, JSONObject } from "waft-json";

export class ComponentTest extends Page {
  constructor(props: Props) {
    super(props);
  }

  clickOverlayBtn(e: Event): void{
   this.setState(
      JSON.parseObject(`{"showOverlay":true}`)
    );
    console.log("====打开遮罩");
  }

  clickOverlay(e: Event): void{
    this.setState(
      JSON.parseObject(`{"showOverlay":false}`)
    );
    console.log("====关闭遮罩");
  }
}

API

• props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | show | 是否显示遮罩层 | boolean | false |

• Event | 事件名 | 说明 | 参数 | | —- | —- | —- | | onTap | 点击遮罩层触发 | |

• slot | 名称 | 说明 | | —- | —- | | | 遮罩层中间显示内容 |