Overlay 遮罩层

介绍

创建一个全局遮罩，在里面显示特定的元素

使用指南

一般用法

点击空白区域时隐藏

<tms-button bindtap="showOverlay">显示</tms-button>
<tms-overlay show="{{show}}">
    <view class="demo-content"/>
</tms-overlay>

Component({
  data: {
    show: false,
  },
  methods: {
    showOverlay() {
      this.setData({
        show:true,
      });
    },
  }
})

受控组件

点击空白区域不自动隐藏

<tms-button bindtap="showOverlay">显示</tms-button>
<tms-overlay show="{{show}}" hide-on-tap="{{ false }}" bind:on-click="onClickOverlay">
    <view class="demo-content"/>
</tms-overlay>

Component({
  data: {
    show: false,
  },
  methods: {
    showOverlay() {
      this.setData({
        show:true,
      });
    },
    onClickOverlay() {
      // 处理业务
      setTimeout(() => {
        this.setData({
          show: false,
        });
      }, 1900);
    },
  }
})

API

属性	说明	类型	默认值	版本
show	控制显示隐藏组件	boolean	false
duration	动画时长，单位毫秒。	number	250
z-index	组件元素z-index值	string	9999
effect	显示隐藏动画效果 scale-in scale-out	string	-
lock-scroll	阻止蒙层下的元素可响应手势滚动,也会导致弹窗内容不可滚动	boolean	true
hide-on-tap	是否点击蒙版自动隐藏	boolean	true
blur	蒙版毛玻璃效果	boolean	false
center	垂直水平居中，horizontal-center为true时不生效	boolean	true
horizontal-center	仅水平居中	boolean	false

effect 可以配置下列两种值，如果同时添加两个效果，中间用空格隔开。

属性	说明
scale-in	显示动画由小到大
scale-out	隐藏动画由大到小

EVENTS

属性	说明	类型
bind:on-click	点击空白区域事件	(event) => {}
bind:hide	点击空白区域自动隐藏后(动画结束)触发	(event) => {}

CSS变量

// 遮罩层背景色
--overlay-background: rgba(0, 0, 0, .5);
// z-index
--overlay-z-index: 9999;
// 动画时长
--overlay-transition-duration: 250ms;

FAQ