vue3点击出现弹窗后背景变暗且不可操作

实现vue3点击出现弹窗后背景变暗且不可操作

一、手写遮罩层方法

1. 效果

2. 代码

AddTask.vue是我自定义的组件，即要弹出的弹窗，不是此笔记重点，此处不做详细说明。

<template>
  <div class="bg-cover" v-if="showCover"></div>
  <div class="column" style="width: 25px;">
  	<q-btn v-for="n in 12" round :color="'teal-'+n" icon="add" class="q-ma-lg"/>
  </div>
  <q-btn round color="primary" icon="add" size="24px" class="fixed-bottom-right q-ma-lg" @click="OpenAddTask()" @closeAddTask="closeAddTask" />
  <AddTask :showAddTask.sync="AddTaskFlag" class="addtask-box" @closeAddTask="closeAddTask"></AddTask>
</template>

<script setup>
import {
      ref } from "vue";
import AddTask from '../components/AddTask.vue'

//添加任务弹窗
let AddTaskFlag = ref(false)