Vue进阶（幺叁柒）：window.onresize事件在vue项目中的应用

属性

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>

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
 

注意事项：

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中销毁掉。

文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：shq5785.blog.csdn.net/article/details/108247025