問題:

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