问题:
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;
}