Vue JS - как получить размер окна всякий раз, когда он меняется

Vue JS - как получить размер окна всякий раз, когда он меняется

20.03.2018 12:44:15 Просмотров 1 Источник

Я новичок в vuejs, но я пытался получить размер окна всякий раз, когда я измените его размер так, чтобы я мог сравнить его с некоторым значением для функции, которую я использую. нужно применять в зависимости от размера экрана. Я также попробовал использовать следите за собственностью но не знаете как с ней обращаться так что возможно именно поэтому она и не сработала

  methods: {

    elem() {
     this.size = window.innerWidth;
     return this.size;
   },
  mounted() {
    if (this.elem < 767){ //some code }
   }
У вопроса есть решение - Посмотреть?

Ответы - Vue JS - как получить размер окна всякий раз, когда он меняется / Vue JS - How to get window size whenever it changes

Является ответом!
Goran

20.03.2018 12:53:36

Поместите этот код в свой компонент Vue:

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

Это зарегистрирует ваш метод Vue при создании компонента, вызовет myEventHandler при изменении размера окна браузера и освободит память, как только ваш компонент будет уничтожен.

Gayan Sandamal

14.07.2018 06:49:16

Вы можете использовать это в любом месте в любое время

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()
}
Calvintwr

15.03.2020 12:01:24

Простейший подход

https://www.npmjs.com/package/vue-window-size

Предварительный просмотр

import Vue from 'vue';
import VueWindowSize from 'vue-window-size';

Vue.use(VueWindowSize);

Затем вы получите доступ к нему обычно из ваших компонентов, таких как этот:

<template>
  <div>
    <p>window width: {{ windowWidth }}</p>
    <p>window height: {{ windowHeight }}</p>
  </div>
</template>
Закрыть X