Mask 蒙版组件

Mask 遮罩层

uniapp+vue3+ts setup 版。创建一个遮罩层，通常用于阻止用户进行其他操作

<template>
  <transition name="fade">
    <view class="pk-mask" @click.stop="onClick" 
    :style="style" v-show="visible">
      <slot></slot>
    </view>
  </transition>
</template>

<script lang="ts" setup>
import { computed, ComputedRef, watchEffect  } from 'vue';

interface Props {
  visible: Boolean;
  zIndex?: Number;
  duration?: Number;
  lockScroll?: Boolean;
  closeOnClick?: Boolean
}

const props = withDefaults(defineProps<Props>(), {
  visible:() => false, // 控制遮罩的显示/隐藏
  zIndex:() => 99, // 自定义遮罩层级 默认1000
  duration:() => 300, // 显示/隐藏的动画时长，单位毫秒
  lockScroll:() => true, // 遮罩显示时的背景是否锁定
  closeOnClick:() => true // 点击遮罩时是否关闭，如果设置 false,那么 click事件将失效
})

const emits = defineEmits<{
  (e:'click', value:any): void;
  (e:'update:visible', value:any): void;
}>()

const onClick = (e:MouseEvent) => {
  if(props.closeOnClick) {
    emits('update:visible', false);
    emits('click', e)
  }
}

const style:ComputedRef = computed(() => {
  return {
    transitionDuration: `${props.duration}ms`,
    zIndex: props.zIndex
  }
})

let count = 0;
const lock = () => {
  if(props.lockScroll) {
    try {
      !count && document.body.classList.add('overflow-hidden');
      count++;
    } catch(error) {}
  }
}
const unlock = () => {
  if(props.lockScroll && count) {
    try {
        count--;
        !count && document.body.classList.remove('overflow-hidden');
      } catch (error) {}
  }
}

watchEffect(() => {
  props.visible ? lock() : unlock();
})


</script>

<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition-property: opacity;
  transition-timing-function: ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.pk-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.7);
}

.overflow-hidden {
  overflow: hidden !important;
}
</style>

Mask 遮罩层使用文档

引用

import pkMask from '@/components/pk-mask/index.vue';

基础用法

💡 Tips：使用 visible 控制遮罩层的显示/隐藏

<template>
  <view @click="show = true">显示遮罩层</view>
  <pk-mask v-model:visible="show"></pk-mask>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const show = ref(false);
</script>

设置动画时间

💡 Tips：通过 duration 设置遮罩显示/隐藏的时间，时间 ms

<template>
  <view @click="show = true">显示遮罩层</view>
  <pk-mask v-model:visible="show" :duration="2500"></pk-mask>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const show = ref(false);
</script>

锁定背景滚动

💡 Tips：通过 lock-scroll 设置遮罩在显示时是否锁定背景，禁止滚动

<template>
  <view @click="show = true">显示遮罩层</view>
  <pk-mask v-model:visible="show" :lock-scroll="true"></pk-mask>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const show = ref(false);
</script>

嵌套内容

💡 Tips：支持默认 slot，可嵌套任意内容

<template>
  <view @click="show = true">显示遮罩层</view>
  <pk-mask v-model:visible="show">
    <view class="wrapper">
      <view class="content">这里是正文</view>
    </view>
  </pk-mask>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const show = ref(false);
</script>

<style lang="scss" scoped>
  .wrapper {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    .content {
      display: flex;
      width: 150rpx;
      height: 150rpx;
      background: #fff;
      border-radius: 8rpx;
      align-items: center;
      justify-content: center;
      color: red;
    }
  }
</style>

点击遮罩不关闭

💡 Tips：设置 closeOnClick 可控制点击遮罩是否关闭，如果设置为 true，那么 click 事件也将同时失效

<template>
  <view @click="show = true">显示遮罩层</view>
  <pk-mask v-model:visible="show" :closeOnClick="false">
    <view class="wrapper">
      <view class="content">close</view>
    </view>
  </pk-mask>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  const show = ref(false);
</script>

<style lang="scss" scoped>
  .wrapper {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
    .content {
      display: flex;
      width: 150rpx;
      height: 150rpx;
      background: #fff;
      border-radius: 8rpx;
      align-items: center;
      justify-content: center;
      color: red;
    }
  }
</style>

API

参数	说明	类型	默认值
v-model:visible	控制遮罩的显示/隐藏	boolean	false
zIndex	自定义遮罩层级	number	99
duration	组件显示/隐藏的动画时长，单位毫秒	number	300
lockScroll	背景是否锁定	boolean	true
closeOnClick	点击遮罩时是否关闭，如果设置 false,那么 click事件将失效	boolean	true

Events

事件名	说明	回调参数
click	点击时触发，仅当 closeOnClick 为 true 时生效	event: MouseEvent

Slots

名称	说明
default	自定义内嵌内容