web-dev-qa-db-fra.com

Ajouter un événement Vue.js à la fenêtre

Vue.js permet d’appliquer un événement à un élément:

<div id="app">
   <button @click="play()">Play</button>
</div>

Mais comment appliquer un événement sur un objet window? ce n'est pas dans DOM.

par exemple:

<div id="app">
  <div @mousedown="startDrag()" @mousemove="move($event)">Drag me</div>
</div>

dans cet exemple, comment écouter l'événement mousemove sur window?

javascriptjavascript-eventsvue.js
8
Yukulélé

Vous devez simplement le faire manuellement lors de la création et de la destruction du composant.

...
created: function() {
  window.addEventListener('mousemove',this.move);
},
destroyed: function() {
  window.removeEventListener('mousemove', this.move);
}
...
24
Jeff

Vous pouvez également utiliser la bibliothèquevue-global-events. 

<GlobalEvents @mousemove="move"/>

Il prend également en charge les modificateurs d'événements tels que @keydown.up.ctrl.prevent="handler".

1
Damian Dulisz

La réponse de Jeff est parfaite et devrait être la réponse acceptée. M'a beaucoup aidé! 

Bien que j'ai quelque chose à ajouter qui m'a causé un mal de tête. Lors de la définition de la méthode move, il est important d'utiliser le constructeur de la fonction et de ne pas utiliser les fonctions de flèche ES6 si vous souhaitez accéder à this sur le composant enfant. this ne passe pas aux fonctions de flèche.

Voici mon implémentation avec la méthode appelée (ici appelée keyDown au lieu de move) incluse: 

export default {
  name: 'app',
  components: {
    SudokuBoard
  },
  methods: {
    keyDown: function () {
      const activeElement = document.getElementsByClassName('active')[0]
      if (activeElement && !isNaN(event.key) && event.key > 0) {
        activeElement.innerHTML = event.key
      }
    }

  },

  created: function () {
    window.addEventListener('keydown', this.keyDown)
  },

  destroyed: function () {
    window.removeEventListener('keydown', this.keyDown)
  }
}

Pour être très clair, la méthode ci-dessous n'a pas accès à this et ne peut par exemple pas atteindre l'objet data ou props de votre composant enfant. 

methods: { 
    keyDown: () => {
      //no 'this' passed. Can't access child's context 
      }
1
Emanuel Lindström

Ceci est destiné à quelqu'un qui a atterri ici à la recherche d'une solution pour nuxt.js:

Je créais un en-tête collant pour l'un de mes projets et je rencontrais un problème pour faire fonctionner window.addEventListener.

Tout d’abord, je ne sais pas pourquoi, mais window.addEventListener ne fonctionne pas avec les hooks created ou beforeCreate, d’où l’utilisation de mounted.

<template lang="pug">
  header(:class="{ 'fixed-header': scrolled }")
    nav menu here
</template>

<script>
export default {
  name: 'AppHeader',

  data() {
    return { scrolled: false };
  },

  mounted() {
    // Note: do not add parentheses () for this.handleScroll
    window.addEventListener('scroll', this.handleScroll);
  },

  methods: {
    handleScroll() {
      this.scrolled = window.scrollY > 50;
    },
  },
};
</script>
0
Syed