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