造轮子-遮罩

注：该组件基于vue3开发

组件代码

<template>
    <div :class="{ mask: isShow }"></div>
</template>

<script setup>

import {defineProps} from "vue";

const props =  defineProps({
    isShow: {
        type: Boolean,
        required: true
    }
});
</script>

<style scoped>
.mask {
    transition: all 1s;
    position: fixed;
    z-index: 50;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style>

组件用途

遮罩组件常用于弹窗、抽屉、加载状态、图片预览等场景，用来弱化背景内容并阻止用户继续操作底层页面。

显示流程

flowchart LR
    A[父组件改变 isShow] --> B{isShow 是否为 true}
    B -- 是 --> C[添加 mask class]
    B -- 否 --> D[移除 mask class]
    C --> E[显示固定定位遮罩]
    D --> F[页面恢复正常]

Props 设计

参数	类型	说明
isShow	Boolean	是否显示遮罩

如果后续扩展，可以增加：

参数	说明
zIndex	控制层级
opacity	控制透明度
closeOnClick	点击遮罩是否关闭

改进版示例

<template>
  <div
    v-if="modelValue"
    class="mask"
    :style="{ zIndex }"
    @click="handleClick"
  ></div>
</template>

<script setup>
const props = defineProps({
  modelValue: Boolean,
  zIndex: {
    type: Number,
    default: 50
  },
  closeOnClick: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue']);

function handleClick() {
  if (props.closeOnClick) {
    emit('update:modelValue', false);
  }
}
</script>

使用注意事项

1. 遮罩层级要低于弹窗内容，高于普通页面内容。
2. 页面出现多个弹层时，要统一管理 z-index。
3. 移动端弹层打开后，可以考虑禁止背景滚动。
4. 如果遮罩用于加载状态，要给用户明确的加载提示。