web-dev-qa-db-fra.com

Comment obtenir les coordonnées de la souris dans VueJS

J'ai un composant déclenché avec v-on:click="someMethod".

Comment puis-je obtenir les coordonnées de la souris (X, Y) de ce clic?

Informations supplémentaires: composant HTML5 Canvas

javascriptvue.jsvuejs2vue-component
10
Luiz

Vue passe le event comme premier paramètre de la méthode. Si paramètres, utilisez plutôt ceci: someMethod (param1, param2, event)

methods: {
    someMethod(event) {
        // clientX/Y gives the coordinates relative to the viewport in CSS pixels.
        console.log(event.clientX); // x coordinate
        console.log(event.clientY); // y coordinate

        // pageX/Y gives the coordinates relative to the <html> element in CSS pixels.
        console.log(event.pageX); 
        console.log(event.pagey); 

        // screenX/Y gives the coordinates relative to the screen in device pixels.
        console.log(event.screenX);
        console.log(event.screenY);
    }
}
20
kevguy

Comme vous le feriez dans n'importe quel gestionnaire d'événements

new Vue({
  el: '#element',
  methods: {
    someMethod: function (event) {
      var x = event.pageX;
      var y = event.pageY;
    }
  }
})

Il y a aussi clientX et screenX, ils retournent des résultats quelque peu différents selon la fenêtre, l'écran ou le contenu rendu.

5
adeneo