01 window.onresize

onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数

  1. window.onresize = funcRef;
  1. //vue页面
  3. <template>
  4.   <div id='echart'>
  5.     vue window.onresize
  6.   </div>
  7. </template>
  9. <script>
  10.   export default {
  11.     data() {
  12.       return {
  14.       };
  15.     },
  16.     methods: {
  17.       pageResize(){
  18.         this.$nextTick(()=>{
  19.           var echart = document.getElementById('echart');
  20.           echart.style.height = document.documentElement.offsetHeight-220 + 'px'
  21.         })
  22.       }
  23.     },
  24. 　　//挂载window.onresize事件
  25.     mounted(){
  26.       let _this = this; //赋值vue的this
  27.       window.onresize = ()=>{
  28. 　　　　//调用methods中的事件
  29.         _this.pageResize();
  30.       }
  31.     },
  32. 　　//注销window.onresize事件
  33.     destroyed(){
  34.       window.onresize = null;
  35.     }
  36.   }
  37. </script>
  38. <style lang="scss">
  39. #echart{
  40.   background-color: #fff;
  41.   border-radius: 4px;
  42.   padding: 20px;
  43.   min-height: 400px;
  44. }
  45. </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中销毁掉。

如果一个组件中的多个子组件中都使用了window.onrsize那么会出现只有一个起作用的情况，一般在在其他的组件中使用window.addlistenter(‘resize’,()=>{}) 这种形式去去修改；