vue全局遮罩

1.创建一个全局组件，例如Mask.vue，用于显示遮罩层的内容。

<template>
  <div class="mask" v-if="show">
    <!-- 遮罩层的内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false // 控制遮罩层的显示与隐藏
    };
  }
};
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);

2.在需要显示遮罩的地方，使用 Vue 的 v-if 或 v-show 指令来控制 GlobalMask 组件的显示与隐藏

3.可以使用 Vue 的 provide/inject 或者 Vuex 来实现全局状态管理，以控制遮罩的显示与隐藏状态。

4.在需要显示全局遮罩的地方，调用 showMask 方法即可显示遮罩

<template>
  <div>
    <!-- 其他组件内容 -->
    
    <!-- 全局遮罩组件 -->
    <GlobalMask v-if="showGlobalMask" />
  </div>
</template>

<script>
import GlobalMask from '@/components/GlobalMask';

export default {
  components: {
    GlobalMask,
  },
  data() {
    return {
      showGlobalMask: false, // 控制遮罩的显示与隐藏状态
    };
  },
  // 其他组件方法中可以通过调用该方法来显示遮罩
  methods: {
    showMask() {
      this.showGlobalMask = true;
    },
    hideMask() {
      this.showGlobalMask = false;
    },
  },
};
</script>

5.overlay

<view class="dropdown-item" v-show="showRightPopup">
      <div
        class="overlay"
        @click="handleToggle"
        :style="{ ...flagStyle }"
      ></div>
     </view>
     
    .overlay {
      position: absolute;
      animation-duration: 0.2s;
      z-index: 1001;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }