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);
}