效果图：
有疑问的可以在下方留言交流哦
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } #app{ width: 100vw; height: 100vh; } .home{ width: 100%; height: 100%; background: url(img/home.png) no-repeat 0 0 / contain; } .box{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); position: fixed; left: 0; top: 0; } .in_box{ width: 200px; height: 300px; background: url(img/bg.png) center center / cover; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%) ; } .btn{ border: 1px solid white; border-radius: 50%; width: 20px; height: 20px; color: white; background-color: transparent; position: absolute; bottom: 10px; left: 50%; transform: translate(-50%,-50%); } </style> </head> <body> <div id="app"> <div class="home"> </div> <q-mask @xxx="handleClick" :flag=flag></q-mask> </div> <template id="hmask"> <div class='box' v-show=flag> <div class="in_box" > <button class="btn" @click="inHandleClick">X</button> </div> </div> </template> <script type="text/javascript"> let qMask={ template:'#hmask', props:{ flag:{ type:Boolean } }, methods:{ inHandleClick:function(){ this.$emit('xxx') } } }; let vm=new Vue({ el:'#app', data:{ flag:true }, components:{ qMask:qMask }, methods:{ handleClick:function(){ this.flag=false } } }); </script> </body> </html>