web-dev-qa-db-ja.com

Vue JS-変更されるたびにウィンドウサイズを取得する方法

私はvuejsが初めてですが、画面サイズに応じて適用する必要がある関数の値と比較できるように、サイズを変更するたびにウィンドウサイズを取得しようとしました。また、監視プロパティを使用しようとしましたが、それを処理する方法がわからないため、おそらく動作しませんでした

  methods: {

    elem() {
     this.size = window.innerWidth;
     return this.size;
   },
  mounted() {
    if (this.elem < 767){ //some code }
   }
javascripthtmlvue.js
11
sara

Vueコンポーネント内にこのコードを配置：

created() {
  document.addEventListener("resize", this.myEventHandler);
},
destroyed() {
  document.removeEventListener("resize", this.myEventHandler);
},
methods: {
  myEventHandler(e) {
    // your code for handling resize...
  }
}

これにより、イベントでvueメソッドが登録され、イベントオブジェクトと一緒に完全なVueオブジェクトが提供され、コンポーネントの破棄（空きメモリ）で削除されます。

15
Goran

これはいつでもどこでも使用できます

methods: {
    //define below method first.
    winWidth: function () {
        setInterval(() => {
            var w = window.innerWidth;
            if (w < 768) {
                this.clientsTestimonialsPages = 1
            } else if (w < 960) {
                this.clientsTestimonialsPages = 2
            } else if (w < 1200) {
                this.clientsTestimonialsPages = 3
            } else {
                this.clientsTestimonialsPages = 4
            }
        }, 100);
    }
},
mounted() {
    //callback once mounted
    this.winWidth()
}
2
Gayan Sandamal