component-全局透明遮罩层与点击遮罩层关闭

1.创建Overlay.vue的全局组件或子组件，用于显示透明遮罩层。

<template>
	<div class="overlay" @click="closeOverlay"></div>
  </template>
  
  <script>
  export default {
	methods: {
	  closeOverlay() {
		// 子组件调用父组件方法
		this.$parent.closeOverlay();
	  }
	}
  };
  </script>
  
  <style>
  .overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.1;
	background-color: red; /* 设置背景颜色和透明度 */
	z-index: 10000;
  }
  </style>

2.Vue应用程序中注册并引入全局组件Overlay.vue。 

// main.js
import Vue from 'vue';
import Overlay from './components/Overlay.vue';

Vue.component('overlay', Overlay);

3.父组件中的使用

<template>
  <div class="allOwn">
    <OverLay v-if="showOverlay" @click="closeOverlay()"></OverLay> //全局透明遮罩层
  </div>
</template>
<script>
 data(){
 return {
	  showOverlay: false, // 控制是否显示遮罩层
}
}
 methods: {
    // 打开抽屉
	open() {
      this.isshow = true;
	  this.showOverlay=true
    },
    // 抽屉隐藏
	closeOverlay(){
		this.showOverlay=false;
		this.isshow = false;
	},
}