直接上项目代码
<template>
//次处ref用于获取页面高度
<div class="content" ref="overpass"></div>
</template>
<script>
export default {
data() {
return {
height:0 //高度初始值为0
}
},
methods: {
// 自定义高度
setHeight() {
this.height = this.$refs.overpass.offsetHeight - 120;
}
},
mounted() {
// 添加监听事件setHeight
this.$nextTick(() => {
window.addEventListener("resize", this.setHeight);
this.setHeight(); //监听处理逻辑
});
},
beforeDestroy() {
// 移除绑定的setHeight事件监听
window.removeEventListener("resize", this.setHeight);
},
};
</script>
<style>
//高度设置100%,这很重要!!!
.content {
height: 100%;
width: 100%;
}
</style>