vue项目中实现遮罩层

<template><div id="app"><div id="mask" ref="mask" @click="mask()"><img src="..." class="mask_img"></div></div></template>mounted() {this.$refs.mask.style.heig

至少零下七度

11613人浏览 · 2021-05-15 11:57:04

至少零下七度 · 2021-05-15 11:57:04 发布

<template>
 	 <div id="app">
		<div id="mask" ref="mask" @click="mask()">
     		 <img src="..." class="mask_img">
 		</div>
 	</div>
 </template>

mounted() {
    this.$refs.mask.style.height = window.document.getElementById('app').clientHeight + 'px'
  },

#mask{
  width: 100%;
  opacity: 0.6;
  background-color: black;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 998;
}
.mask_img{
  width: 316px;
  height: 200px;
  z-index: 999;
  position: fixed;
  right: 0px;
}

在这里插入图片描述