遮罩层 Mask

弹出占据全屏幕的半透明遮罩。

基本案例

遮罩层可通过设置show属性为truefalse来控制显示和隐藏,不设置则显示状态默认为false

示例代码

  1. <l-mask show="{{true}}"> </l-mask>

如下图:

基本案例

自定义透明度

遮罩层可以通过设置 opacity 属性的值来改变它的不透明度,opacity 为0~1的浮点值,默认0.5。

示例代码

  1. <l-mask show="{{true}}" opacity="0.7"> </l-mask>

示例代码

  1. <l-mask show="{{true}}" opacity="0.3"> </l-mask>

设置子节点

我们在使用的组件的时候,可以根据使用场景,自由的在遮罩层组件内插入 <image> <view> <text> 等子节点,当然,你也可以在其中插入 自定义组件

注意事项

  • 如果需要设置多个子节点并定位在页面的不同位置,可以设置单个子节点的 positionfixed,再通过 lefttop 这样的css属性来完成布局。
  • 默认原点为页面左上角,例如:top:20rpx;left:20rpx; 就代表子节点从页面左上角,先向下平移20rpx; 再向右平移20rpx

Tips:

示例代码

  1. <l-mask show="{{true}}">
  2. <view class='mask-content'>
  3. <view class='mask-close' bindtap='onHideMaskTap'>隐藏遮罩</view>
  4. </view>
  5. </l-mask>

自定义子节点

设置子节点是否居中

遮罩层可以通过设置 center 属性的值为true 或者 false 来设置他是否垂直居中,默认为 垂直居中显示。

注意事项

如果设置为 false ,则 <slot> 居左上角显示。

示例代码

  1. <l-mask show="{{true}}" center="{{false}}">
  2. <view class="mask-content">
  3. <view class="mask-text" >取消子节点的垂直居中</view>
  4. </view>
  5. </l-mask>

锁定mask

设置按钮的 locked 属性来控制遮罩层的锁定态,属性值为 true 时点击遮罩层背景部分不会关闭整个遮罩,属性值为 false 时点击遮罩层背景会立即关闭,默认为 false

示例代码

  1. <l-mask show="{{true}}" locked="{{true}}">
  2. <view class="mask-content">
  3. <view class="mask-close" bindtap="onHideMaskTap">隐藏遮罩</view>
  4. </view>
  5. </l-mask>

用户案例

浏览完以上内容,我们已经简单了解了 Mask 组件的属性以及用法。

下面让我们来根据示例代码,实现多个子节点展示的效果。

多个子节点

通过效果图,我们来分析下怎样去实现该案例,可以将过程分为两部分:

  1. 设置Mask组件的 show 属性为truelocked 设置为 true。 然后传入自定义的子节点。
  2. 将子节点的css属性设置为position: fixed ,再通过 lefttop 等对它进行定位。

以下是实现该案例的代码。

代码示例

  1. <!-- wxml文件 -->
  2. <l-mask
  3. show="{{true}}"
  4. locked="{{true}}"
  5. class="mask-class"
  6. >
  7. <view class='content mask-content1' >
  8. 这里是子节点一
  9. </view>
  10. <view class='content mask-content2'>
  11. 这里是子节点二
  12. </view>
  13. <view class='content mask-content3' >
  14. 这里是子节点三
  15. </view>
  16. </l-mask>
  1. /* wxss文件 */
  2. .content {
  3. height: 80rpx;
  4. width: 300rpx;
  5. border-radius: 10rpx;
  6. line-height: 80rpx;
  7. font-size: 28rpx;
  8. text-align: center;
  9. color: #333;
  10. }
  11. .mask-content1 {
  12. position: fixed;
  13. top: 50rpx;
  14. left: 50rpx;
  15. background: #fff;
  16. }
  17. .mask-content2 {
  18. position: fixed;
  19. top: 300rpx;
  20. right: 20rpx;
  21. background: #fff;
  22. }
  23. .mask-content3 {
  24. position: fixed;
  25. bottom: 50rpx;
  26. left: 50rpx;
  27. background: #fff;
  28. }

遮罩层属性(Mask Attributes)

参数说明类型可选值默认值
show控制遮罩层的显示Stringtrue/falsefalse
opacity透明度String,Number0~10.5
z-index组件的页面层级Number——-99
locked遮罩层是否设定为锁定态Booleantrue/falsefalse
center设置子节点是否为垂直居中Booleantrue/falsetrue

遮罩层外部样式类 (Mask ExternalClasses)

外部样式类名说明备注
l-class覆盖遮罩层外部样式类—-
l-mask-class覆盖遮罩层插槽部分外部样式类—-

注意事项

  1. z-index默认为99,如果当前引入mask组件的页面中有z-index值大于99的节点,那么为了避免错误的显示效果,可以将mask的z-index属性的值重新设置。
  2. 传入 true/false 时候,需要使用 Mustache 语法(双大括号)将值包起来

遮罩层事件(Mask Events)

事件名称说明返回值备注
bind:lintap当点击背景时触发————-————