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