vue 全局透明遮罩层

       在Vue中创建一个全局透明遮罩层可以通过几个步骤来实现。这通常涉及到创建一个自定义组件，然后通过全局方法或在根Vue实例中动态创建组件实例来显示遮罩层。以下是一个如何实现这个功能的基本指南：

1. 创建遮罩层组件: 首先，创建一个遮罩层组件(Overlay.vue):

   <template>
     <div
       v-if="visible" 
       class="overlay"
       @click="handleOverlayClick"
     ></div>
   </template>
   
   <script>
   export default {
     name: 'Overlay',
     data() {
       return {
         visible: false,
       };
     },
     methods: {
       show() {
         this.visible = true;
       },
       hide() {
         this.visible = false;
       },
       handleOverlayClick() {
         this.$emit('click');
       },
     },
   };
   </script>
   
   <style>
   .overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     background-color: rgba(0, 0, 0, 0.5); /* Adjust transparency as needed */
     z-index: 9999; /* Ensure it sits on top of other content */
   }
   </style>

2. 创建一个插件来管理遮罩层: 创建一个插件文件(overlay-plugin.js), 用于注册全局方法或实例属性，使得遮罩层可以在任何组件中使用。

   import Overlay from './Overlay.vue';
   
   const OverlayPlugin = {
     install(Vue) {
       const OverlayConstructor = Vue.extend(Overlay);
       const overlayInstance = new OverlayConstructor();
       overlayInstance.$mount(document.createElement('div'));
       document.body.appendChild(overlayInstance.$el);
   
       // 添加实例方法
       Vue.prototype.$overlay = {
         show() {
           overlayInstance.show();
         },
         hide() {
           overlayInstance.hide();
         },
       };
     },
   };
   
   export default OverlayPlugin;

3. 在主入口文件中使用插件: 在你的主JavaScript文件(main.js)中，使用这个插件。

   import Vue from 'vue';
   import App from './App.vue';
   import OverlayPlugin from './overlay-plugin';
   
   Vue.use(OverlayPlugin);
   
   new Vue({
     render: h => h(App),
   }).$mount('#app');

4. 在任意组件中使用遮罩层: 现在你可以在任何组件内通过this.$overlay.show()和this.$overlay.hide()来控制遮罩层的显示和隐藏。

例如，使用按钮控制遮罩层： 

<template>
  <div>
    <button @click="showOverlay">Show Overlay</button>
  </div>
</template>

<script>
export default {
  methods: {
    showOverlay() {
      this.$overlay.show();
      // To hide the overlay after some action, you can call:
      // this.$overlay.hide();
    }
  }
}
</script>

 以上步骤实现了一个简单的全局遮罩层，你可以根据你的应用需要进行调整和增强（例如，添加动画或更多的自定义事件处理）。