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