Vue进阶(幺叁柒):window.onresize事件在vue项目中的应用
【摘要】 属性
window.onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数。
在窗口大小改变之后,就会触发resize事件.
//vue页面
<template>
<div id='echart'> 报表
</div>
</template>
<script>
export default { data() { return ...
属性
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中销毁掉。
文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。
原文链接:shq5785.blog.csdn.net/article/details/108247025
【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论(0)