VUE リスニング ウィンドウの変更イベントの問題を解決する方法

ここで、VUE 監視ウィンドウ変更イベントの問題について簡単に説明します。これは良い参考値であり、皆さんのお役に立てれば幸いです。

Vuejs 自体は MVVM フレームワークです。ただし、ウィンドウ上のイベントを監視する場合、これでは不十分であることがよくあります。

たとえば、今回は window.resize でしたが、実行する前に Baidu で検索しました。誰もがこの問題について心配しているようです。

質問: 私も今日、キャンバスの適応に関してそのような問題に遭遇しました。 ウィンドウの変更に応じてキャンバスの幅を変更します。 注: フレームワークのバグを解決するために、最初にフレームワークのバージョンについて説明します

。解決策:

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

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

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

mounted () { 
    const that = this window.onresize = function() { 
    return function(){ 
      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) 
      } 
     } 
   }

以上、皆さんのためにまとめてみましたので、今後皆さんのお役に立てれば幸いです。

関連記事:

Vueでタブ切り替え+スタイル切り替え方式を実装

JavaScriptの「==」と「===」の違いを詳しく解説

node.jsブログプロジェクト開発記

以上がVUE リスニング ウィンドウの変更イベントの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。