Vue.js Obsluga zdarzeń

pytanie zadane 9 lipca 2018 w JavaScript przez Piotr Szramowski Użytkownik (860 p.)

Cześć wszystkim .Ostatnio natknełem sie na problem Vue.js ,że nie ma wbudowanego zdarzenia resize . chciałem sie dowiedzieć w jaki sposób dodać takie zdrzenie . Moim celem jest . Z czytanie wielkość okna przeglądarki i w momencie przekroczenia pewnej wielkość elementy na stronie za pomoca dytektywy v-show mają zniknąć. Co mam zrobić lub dodać żeby istancja Vue z Czytała zdarzenia w ( methods lub Computed)

< tr @resize = "change" > ==> Co dalej

2 odpowiedzi

odpowiedź 9 lipca 2018 przez thryndl Nałogowiec (30,470 p.)

Miałem ostatnio podobny problem, z tym, że chciałem responsywnie dopasować rozmiar odtwarzacza na stronie.

Rozwiązałem to w ten sposób.

W template na elemencie v-layout (vuetify) dałem zdarzenie v-resize i nasłuchiwanie na metodę onResize()

W data() dodałem obiekt windowSize, który przechowuje rozmiar okna, jego width i height.

w mounted() podmontowałem metodę onResize(), a sama metoda onResize() wygląda tak:

onResize () {
    this.windowSize = { w: window.innerWidth - 190, h: window.innerHeight - 230 }
}

Cały kod prezentuje się następująco:

<template>
  <v-layout justify-center align-center v-resize="onResize">
   // ...
  </v-layout>
</template>

<script>
export default {
  data () {
    return {
      windowSize: {
        w: 0,
        h: 0
      }
    }
  },
  mounted () {
    this.onResize()
  },
  methods: {
    onResize () {
      this.windowSize = { w: window.innerWidth - 190, h: window.innerHeight - 230 } // odejmowane wartości tworzą marginesy
    }
  }
}
</script>

odpowiedź 9 lipca 2018 przez niezalogowany

methods: {
  onResize (e) {
    console.log(e)
  }
},
mounted () {
  window.addEventListener('resize', this.onResize)
},
beforeDestroy () {
  window.removeEventListener('resize', this.onResize)
}