其他分享
首页 > 其他分享> > window.onresize事件在vue项目中的应用

window.onresize事件在vue项目中的应用

作者:互联网

复制代码
//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>
复制代码

注意事项:

1、window.onresize事件一般放在created或者mounted生命周期中,这样界面改变是能触发。

2、window.onresize中的this指向的是window,不是指向vue,如果需要调用methods中的函数,需要在window.onresize事件的前面把指向vue的this赋值给其他字符,比如"_this"。

3、由于window.onresize是全局事件,在其他页面改变界面时也会执行,这样可能会出现问题,需要在出这个界面时注销window.onresize事件。

4、window.onresize说明一个问题:beforeCreate、created、beforeMount、mounted、beforeUpdate、updated中的会触发浏览器事件需要在destroyed、beforeDestory中销毁掉。

标签:vue,echart,onresize,window,事件,methods
来源: https://www.cnblogs.com/coderwhytop/p/14817576.html