How to monitor window.resize in VueJs and how to implement it specifically?

This article mainly introduces the example of VueJs monitoring window.resize method. Now I share it with you and give it as a reference.

Vuejs itself is an MVVM framework.

But when monitoring events on the window, it often seems powerless.

For example, this time it is window.resize

Well, I also searched Baidu before doing it. I see everyone is worried about this issue.

Question: Today I also encountered such a problem, which is about canvas adaptation. Change the width of the canvas according to the change of the window

Remarks: Important issues should be mentioned three times to solve bugs in the framework. Let’s talk about the framework version first (Vue 2.x, ES6 used here)

Solution:

First step: First define a record width as an attribute in data

data: {
 screenWidth: document.body.clientWidth // 这里是给到了一个默认值 （这个很重要）
}

Second step: We need to mount the reisze event when vue mounted Its method

  mounted () {
   const that = this
   window.onresize = () => {
    return (() => {
     window.screenWidth = document.body.clientWidth
     that.screenWidth = window.screenWidth
    })()
   }
  }

The third step: watch to monitor the change of this attribute value, if it changes, pass the val to this.screenWidth

  watch: {
   screenWidth (val) {
    this.screenWidth = val
   }
  }

The fourth step: Optimize because of frequent triggering The resize function causes the page to become stuck.

  watch: {
   screenWidth (val) {
    if (!this.timer) {
     this.screenWidth = val
     this.timer = true
     let that = this
     setTimeout(function () {
      // that.screenWidth = that.$store.state.canvasWidth
      console.log(that.screenWidth)
      that.init()
      that.timer = false
     }, 400)
    }
   }
  }

The above is what I compiled for you. I hope it will be helpful to you in the future.

Related articles:

How to implement mouse-responsive Taobao animation effect in jQuery

How to use jQuery to implement mouse-responsive transparency gradient Animation effect

How to determine NaN in JavaScript

How to implement the WeChat scan code payment function in the nodejs environment?

Using Vue to implement the underlying principles (detailed tutorial)

How to control file dragging and obtain dragging content functions in js

The above is the detailed content of How to monitor window.resize in VueJs and how to implement it specifically?. For more information, please follow other related articles on the PHP Chinese website!