ホームページ > 記事 > ウェブフロントエンド > 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を使用してマウス応答の透明度グラデーションアニメーション効果を実装する方法
Nodejs 環境で WeChat コードスキャン決済機能を実装するにはどうすればよいですか?
Vueを使用して基礎的な原則を実装する(詳細なチュートリアル)
ファイルのドラッグを制御し、jsでドラッグコンテンツ関数を取得する方法
以上がVueJs で window.resize を監視する方法とそれを具体的に実装する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。