attribute

The window.onresize property can be used to get or set the event handler for the resize event of the current window.

After the window size changes, the resize event is emitted.

// Vue page <template> <div ID ='echart'> report </div> </template> <script> export default {data() {return {}; }, methods: { pageResize(){ this.$nextTick(()=>{ var echart = document.getElementById('echart'); echart.style.height = document.documentElement.offsetHeight-220 + 'px' }) } }, // Mount window.onresize event (){let _this = this; // Assign vue's this window.onresize = ()=>{// call methods' event _this.pageresize (); }}, // Cancel window.onresize event destroyed(){window.onresize = null; } } </script> <style lang="scss"> #echart{ background-color: #fff; border-radius: 4px; padding: 20px; min-height: 400px; } </style>Copy the code

Matters needing attention:

  1. The window.onresize event is usually placed in the Created or Mounted lifecycle so that it can be triggered when the interface changes.
  2. Window. onresize this refers to window, not vue. If you need to call methods, you need to assign this to vue to another character, such as “_this”, before the window.onresize event.
  3. Since window.onresize is a global event, it will be executed when other pages change the interface. This may cause problems, and you need to log out of the window when exiting the interface.
  4. Window.onresize indicates a problem: BeforeCreate, Created, beforeMount, Mounted, beforeUpdate, and updated trigger browser events and need to be destroyed in destroyed and beforeDestory.