在窗口上添加Vue.js事件

Question

Vue.js允许在元素上应用事件:

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

但是如何在window对象上应用事件？它不在DOM中.

例如:

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

在这个例子中,如何监听mousemove事件window？

Answer 1

您应该在创建和销毁组件期间手动执行此操作

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

Answer 2

杰夫的回答是完美的，应该是公认的答案。帮了我很多忙！

虽然，我有一些事情要补充，这让我有些头疼。在定义move方法时，如果要访问子组件，请务必使用function()构造函数而不是使用 ES6 箭头函数。不会从它被调用的地方传递给箭头函数，而是引用它定义它的周围环境。这称为词法范围。=>thisthis

这是我的被调用方法（此处称为keyDown而不是move）的实现：

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

更清楚的是，下面的方法无法访问this，例如无法访问子组件上的数据或道具对象。

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

Answer 3

您还可以使用vue-global-events库。

<GlobalEvents @mousemove="move"/>

它还支持事件修饰符，如@keydown.up.ctrl.prevent="handler".