VueJs で window.resize を監視する方法とそれを具体的に実装する方法は?

この記事では主に VueJs の window.resize メソッドの監視例を紹介しますので、参考にしてください。

Vuejs 自体は MVVM フレームワークです。

しかし、ウィンドウ上でイベントを監視していると、それが無力に見えることがよくあります。

例えば今回はwindow.resizeでした

まあ、やる前にBaiduでも検索しました。誰もがこの問題について心配しているようです。

質問: 今日、キャンバスの適応に関するこのような問題にも遭遇しました。 ウィンドウの変更に応じてキャンバスの幅を変更します

備考: フレームワークのバグを解決するための重要な問題について 3 回説明します。 まずフレームワークのバージョンについて説明します (ここでは Vue 2.x、ES6 を使用します)。

解決策:

最初のステップ: まずデータの属性としてレコード幅を定義します

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

ステップ 2: vue がマウントされたときに Reisze イベントをマウントする方法について話す必要があります

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

ステップ 3: この属性値を監視するために監視します変更する場合は、この val を this.screenWidth に渡します

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

ステップ 4: サイズ変更機能が頻繁にトリガーされるためにページがスタックする問題を最適化します

  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)
    }
   }
  }

上記は、私が皆さんのためにまとめたものです。将来的にはもっと良くなるでしょう みんな助けてくれます。

関連記事:

jQueryでマウス応答のTaobaoアニメーション効果を実装する方法

jQueryを使用してマウス応答の透明度グラデーションアニメーション効果を実装する方法

JavaScriptでNaNを判定する方法

Nodejs 環境で WeChat コードスキャン決済機能を実装するにはどうすればよいですか?

Vueを使用して基礎的な原則を実装する(詳細なチュートリアル)

ファイルのドラッグを制御し、jsでドラッグコンテンツ関数を取得する方法

以上がVueJs で window.resize を監視する方法とそれを具体的に実装する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。