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

2021-05-27 14:04:08 阅读：202 来源： 互联网

标签：vue echart onresize window 事件 methods

//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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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