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

亚连
リリース: 2018-06-04 16:12:07
オリジナル
2898 人が閲覧しました

ここで、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート