Javascript 在窗口上添加 Vue.js 事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36993834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add Vue.js event on window
提问by Yukulélé
Vue.js allow apply event on element:
Vue.js 允许在元素上应用事件：
<div id="app">
<button @click="play()">Play</button>
</div>
But how to apply event on windowobject? it is not in DOM.
但是如何在window对象上应用事件？它不在 DOM 中。
for example:
例如：
<div id="app">
<div @mousedown="startDrag()" @mousemove="move($event)">Drag me</div>
</div>
in this example, how to listen mousemove event on window?
在这个例子中，如何监听 mousemove 事件window？
回答by Jeff
You should just do it manually during the creation and destruction of the component
您应该在组件的创建和销毁期间手动执行此操作
...
created: function() {
window.addEventListener('mousemove',this.move);
},
destroyed: function() {
window.removeEventListener('mousemove', this.move);
}
...
回答by Emanuel Lindstr?m
Jeff's answer is perfect and should be the accepted answer. Helped me out a lot!
杰夫的回答是完美的，应该是公认的答案。帮了我很多忙！
Although, I have something to add that caused me some headache. When defining the movemethod it's important to use the function()constructor and not use ES6 arrow function =>if you want access to thison the child component. thisdoesn't get passed through to arrow functions from where it's called but rather referrers to its surroundings where it is defined. This is called lexical scope.
虽然，我有一些事情要补充，这让我有些头疼。在定义move方法时，如果要访问子组件，请务必使用function()构造函数而不是使用 ES6 箭头函数。不会从它被调用的地方传递给箭头函数，而是引用它定义它的周围环境。这称为词法范围。=>thisthis
Here is my implementation with the called method (here called keyDowninstead of move) included:
这是我的被调用方法（此处称为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)
}
}
To be extra clear, The method below doesn't have access to thisand can't for example reach the data or props object on your child component.
更清楚的是，下面的方法无法访问this，例如无法访问子组件上的数据或道具对象。
methods: {
keyDown: () => {
//no 'this' passed. Can't access child's context
}
回答by Damian Dulisz
You can also use the vue-global-eventslibrary.
您还可以使用vue-global-events库。
<GlobalEvents @mousemove="move"/>
It also supports event modifiers like @keydown.up.ctrl.prevent="handler".
它还支持事件修饰符，如@keydown.up.ctrl.prevent="handler".
回答by Syed
This is for someone landed here searching solution for nuxt.js:
这是为登陆这里寻找解决方案的人准备的nuxt.js：
I was creating sticky header for one of my projects & faced issue to make window.addEventListenerwork.
我正在为我的一个项目创建粘性标题并面临window.addEventListener工作问题。
First of all, not sure why but window.addEventListenerdoesn't work with createdor beforeCreatehooks, hence I am using mounted.
首先，不知道为什么但window.addEventListener不能使用created或beforeCreate钩子，因此我使用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>
