vue项目中,实现遮罩

问题:

1.vue中的组件会自动生成虚拟DOM,无法设置高度的百分比

2.选择vue实例的钩子函数

实现:

选择mounted钩子函数(此函数是在DOM渲染完成之后调用),在此函数值中动态设置目标div的高度,高度的单位为px.用另一个元素的clientHeight为目标idv赋值

代码:

html:

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

js:

 this.$refs.mask.style.height = doc.getElementById('app').clientHeight + 'px'

css:

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