前言

最近在uniapp中要写一个弹窗，弹窗好写，但是遮罩没有接触过。找到了下面这篇文章，推荐仔细阅读一下。在这篇文章的基础下，简单封装了一个遮罩。

推荐文章：论如何用Vue实现一个弹窗-一个简单的组件实现

遮罩

备注
组件名不要命名为mask，控制台会提示Do not use built-in or reserved HTML elements as component id，意思是不要将内置或保留的HTML元素用作组件id

效果
添加了一个close-on-click-modal属性，默认点击遮罩，遮罩关闭。设置为false后，点击遮罩，遮罩不关闭。

遮罩实现代码：

<template><div class="mask"><!-- 外层的遮罩 --><div class="mask-cover" v-if="isShow" @click="closeByMask"></div><!-- 设置动画 --><transition name="fade"><!-- 内容区 --><div class="mask-content" v-if="isShow"><!-- 插槽，放置要插入到遮罩里的内容 --><slot name="default"></slot></div></transition></div>
</template><script>
import { ref } from "vue";
export default {props: {//是否可以点击遮罩关闭，默认是closeOnClickModal: {type: Boolean,default: true,},},setup(props) {//控制遮罩的显示let isShow = ref(false);//打开遮罩，由外部进行调用let showMask = () => {isShow.value = true;};//关闭遮罩let closeMask = () => {isShow.value = false;};//通过点击遮罩关闭let closeByMask = () => {if (props.closeOnClickModal) {isShow.value = false;}};return {isShow,showMask,closeMask,closeByMask,};},
};
</script><style scoped lang="scss">
// 最外层，设置position定位
.mask {position: relative;color: #2e2c2d;font-size: 16px;
}
//遮罩，设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
.mask-cover {background: rgba($color: #000000, $alpha: 0.5);position: fixed;z-index: 9999;// 设置top、left、宽高保证全屏遮罩top: 0;left: 0;height: 100%;width: 100%;
}//内容层，z-index要大于遮罩层，确保内容在遮罩上显示
.mask-content {position: fixed;top: 30%;height: 70%;z-index: 10000;
}//动画
.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s ease;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}
</style>

demo代码：

<template><div><el-button type="primary" @click="openDialog">打开</el-button><yc-mask ref="maskRef" :close-on-click-modal="false"><div class="dialog"><div>我是弹窗</div><el-button type="primary" @click="closeDialog">关闭</el-button></div></yc-mask></div>
</template><script>
import { ref } from "vue";
import ycMask from "./yc-mask.vue";
export default {components: {ycMask,},setup() {//获取遮罩的实例let maskRef = ref(null);//打开弹窗let openDialog = () => {maskRef.value.showMask();};//关闭弹窗let closeDialog = () => {maskRef.value.closeMask();};return {maskRef,openDialog,closeDialog,};},
};
</script><style scoped lang="scss">
.dialog {width: 200px;height: 200px;background: #ffffff;display: flex;justify-content: center;align-items: center;
}
</style>