属性
window.onresize
属性可以用来获取或设置当前窗口的resize事件的事件处理函数。
在窗口大小改变之后,就会触发resize事件.
//vue页面
<template>
<div id='echart'>
报表
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
pageResize(){
this.$nextTick(()=>{
var echart = document.getElementById('echart');
echart.style.height = document.documentElement.offsetHeight-220 + 'px'
})
}
},
//挂载window.onresize事件
mounted(){
let _this = this;//赋值vue的this
window.onresize = ()=>{
//调用methods中的事件
_this.pageResize();
}
},
//注销window.onresize事件
destroyed(){
window.onresize = null;
}
}
</script>
<style lang="scss">
#echart{
background-color: #fff;
border-radius: 4px;
padding: 20px;
min-height: 400px;
}
</style>
注意事项:
-
window.onresize事件一般放在created或者mounted生命周期中,这样界面改变时能触发。
-
window.onresize中的this指向的是window,不是指向vue,如果需要调用methods中的函数,需要在window.onresize事件的前面把指向vue的this赋值给其他字符,比如"_this"。
-
由于window.onresize是全局事件,在其他页面改变界面时也会执行,这样可能会出现问题,需要在出这个界面时注销window.onresize事件。
-
window.onresize说明一个问题:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated中的会触发浏览器事件需要在destroyed、beforeDestory中销毁掉。