ホームページ > 記事 > ウェブフロントエンド > 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) } } }
以上、皆さんのためにまとめてみましたので、今後皆さんのお役に立てれば幸いです。
関連記事:
JavaScriptの「==」と「===」の違いを詳しく解説
以上がVUE リスニング ウィンドウの変更イベントの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。