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"><divclass="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);}