Vuejs：如何在键盘转义时隐藏组件<div>？

Question

使用 Vue 2.5 我试图在esc按键被按下时隐藏一个组件。

受关键修饰符文档的启发，我编写了以下代码但没有任何效果（目前我没有隐藏，只是显示一条消息）：

Vue.component('my-component', {
    data: function () {
    return {isVisible:true,
    message:'no key pressed'}
  },
  template: '<div v-on:keyup.esc="myMethod" v-if="isVisible">This is my component<div>{{message}}</div>',
  methods:{
    myMethod : function(){
    this.message = 'esc key pressed'
    //My hiding action...
    }
  }
})

new Vue({
  el: '#app',
  data: {
  }
})

小提琴

编辑：看起来这个问题与我试图在常规 div 上实现这一点有关，而不是在通常使用的输入上

Answer 1

我认为你应该添加

created: function() {
  document.addEventListener('keyup', this.myMethod);
}

在你的方法中：

myMethod(event) {
  if (event.keyCode === 27) {
    this.message = 'esc key pressed'
    console.log('esc key pressed');
  }
}

这是工作示例：https : //jsfiddle.net/uzxugzo7/9/

另外，不要忘记销毁它，以防止内存泄漏

destroyed: function() {
  document.removeEventListener('keyup', this.myMethod);
}