vue3 使用自定义指令（directive）实现快捷添加遮罩层

代码写在src的directive文件夹里面

创建一个overlay.js文件

里面代码如下：

/** v-overlay 给一个有定位的元素（弹窗）绑定遮罩层 当它存在时展示遮罩层 销毁时隐藏遮罩层
 *  ps:如果是组件 则该组件只能有一个根节点
 *  可接受传参：一个对象 属性名：backgroundColor 值：颜色的值
 *  **/

const overlayId = 'overlayId' + Date.now(); // 给遮罩层生成一个绝对不会重复的id
export default {
    mounted(el, binding) {
        // 创建蒙版元素
        const overlay = document.createElement('div');
        overlay.id = overlayId;
        overlay.style.position = 'fixed';
        overlay.style.width = '100%';
        overlay.style.height = '100%';
        overlay.style.top = 0;
        overlay.style.left = 0;
        overlay.style.right = 0;
        overlay.style.bottom = 0;
        overlay.style.zIndex = 9998;
        overlay.style.backgroundColor = binding.value?.backgroundColor || 'rgba(0, 0, 0, 0.6)'; // 半透明黑色蒙版

        // 插入到DOM中
        el.style.zIndex = 9999;
        el.parentNode.appendChild(overlay);
    },
    unmounted() {
        // 移除蒙版
        const overlay = document.getElementById(overlayId);
        if (overlay && overlay.parentNode) {
            overlay.parentNode.removeChild(overlay);
        }
    },
};

之后在index.js文件夹里面全局引入并使用

因为全局注册的 所以在需要的组件可以直接写 使用 当元素存在时展示遮罩层 销毁时遮罩层跟着销毁

<div class="dialog" v-if="isShow" v-overlay></div>

遮罩层效果如下：（可传参修改遮罩层颜色、透明度）