# Mask 蒙层

创建一个蒙层，通常用于阻止用户进行其他操作

重要提示

组件只提供遮罩容器，内容自行通过slot传入
H5如果遇到组件嵌套，蒙层无法覆盖，请尝试设置appendToBody: true
slot高度由内容自动撑开，可自行设置slot高度
如果要设置slot居中，可以使用绝对定位，如pi-abso-center

# 平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
√	√	√	√	√	√	√

# 示例

# 基础用法

可通过v-model | value：设定是否显示蒙层

<template>
  <pi-button type="primary" @click="baseUsed.show = true">
    显示弹出层
  </pi-button>
  <pi-mask v-model="baseUsed.show" />
</template>

<script>
export default {
  data() {
    return {
      baseUsed: {
        show: false
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 过渡动画

使用 piui 内置的动画名称来控制显示和隐藏的动画

animationShow 显示的时候执行的动画
animationHide 隐藏的时候执行的动画

提示

当position为left | right的时候，slot可通过height: 100%;来设置占满高度

<template>
  <pi-button type="primary" @click="handleShowAnimation('top')">
    顶部滑入滑出
  </pi-button>
  <pi-button type="primary" @click="handleShowAnimation('bottom')">
    下方滑入滑出
  </pi-button>
  <pi-button type="primary" @click="handleShowAnimation('left')">
    左侧滑入滑出
  </pi-button>

  <pi-button type="primary" @click="handleShowAnimation('right')">
    右侧滑入滑出
  </pi-button>
  <pi-mask
    v-model="animation.show"
    :animation-show="animation.animationShow"
    :animation-hide="animation.animationHide"
  />
</template>

<script>
export default {
  data() {
    return {
      animation: {
        show: false,
        animationShow: 'pi-ani-slide-top-show',
        animationHide: 'pi-ani-slide-top-hide',
        style: { width: '100%', height: '800rpx' }
      }
    }
  },
  methods: {
    handleShowAnimation(position = 'top') {
      const positionAnimationMap = {
        top: { animationShow: 'pi-ani-slide-top-show', animationHide: 'pi-ani-slide-top-hide' },
        bottom: {
          animationShow: 'pi-ani-slide-bottom-show',
          animationHide: 'pi-ani-slide-bottom-hide'
        },
        left: { animationShow: 'pi-ani-slide-left-show', animationHide: 'pi-ani-slide-left-hide' },
        right: {
          animationShow: 'pi-ani-slide-right-show',
          animationHide: 'pi-ani-slide-right-hide'
        }
      }
      this.animation = {
        show: true,
        ...positionAnimationMap[position]
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# 过渡时间

可通过duration：设置动画过渡的时间

<template>
   <pi-button type="primary" @click="duration.show = true">
    显示蒙层
  </pi-button>
  <pi-mask v-model="duration.show" duration="3000" />
</template>

<script>
export default {
  data() {
    return {
      duration: {
        show: false
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 点击蒙层不关闭

可通过maskCloseable：设置点击蒙层不关闭

提示

可通过调用组件实例的closeMask方法关闭蒙层

<template>
  <pi-button type="primary" @click="maskCloseable.show = true">
    显示蒙层
  </pi-button>
  <pi-mask ref="unCloseableMask" v-model="maskCloseable.show" :mask-closeable="false">
      <view class="pi-abso-center">
        <pi-button
          color="#5A8FFF"
          bg-color="#EEF2FF"
          width="250"
          round
          @click="handleCloseUnCloseableMask"
        >
          关闭蒙层
        </pi-button>
      </view>
    </pi-mask>
</template>

<script>
export default {
  data() {
    return {
      maskCloseable: {
        show: false
      }
    }
  },
  methods: {
     handleCloseUnCloseableMask() {
      this.$refs.unCloseableMask.closeMask()
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# 背景颜色

可通过background：设置蒙层的背景颜色

<template>
  <pi-button type="primary" @click="background.show = true">
    显示蒙层
  </pi-button>
  <pi-mask v-model="background.show" append-to-body background="rgba(0, 0, 0, .9)" />
</template>

<script>
export default {
  data() {
    return {
      background: {
        show: false
      }
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# Props

名称	描述	类型	必选	默认值
value	初始值	—	`false`	-
customStyle	自定义样式	`Object`	`false`	-
customClass	自定义样式类	`String`	`false`	''
animationShow	显示的时候执行的动画	`String`	`false`	`pi-ani-fade-show`
animationHide	隐藏的时候执行的动画	`String`	`false`	`pi-ani-fade-hide`
duration	遮罩的过渡时间格式: '0.56s'、'560ms'、'560'、560	`Number`/`String`	`false`	`300`
maskCloseable	是否可以通过点击遮罩进行关闭	`Boolean`	`false`	`true`
hideTabBar	是否隐藏TabBar	`Boolean`	`false`	`false`
appendToBody	是否挂载到body下，防止嵌套层级无法遮罩的问题（仅H5环境生效）	`Boolean`	`false`	`true`
zIndex	层级z-index	`Number`/`String`	`false`	`999`
background	背景颜色	`String`	`false`	`rgba(0, 0, 0,.5)`

# Events

事件名	描述	参数
close	即将关闭弹窗	-
closed	已经关闭弹窗	-

# Slots

名称	描述	插槽内容
default	蒙层内区域插槽	-

# MixIns

MixIn
ValueSync

← Form 表单 Modal 弹窗 →