Question

使用Vue 2.5如果按下esc键，我试图隐藏组件。

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

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

Fiddle

编辑：看起来这个问题与我试图在常规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);
}

Answer 2

要使键盘事件可以访问静态元素tabindex

<div v-on:keyup.esc="myMethod" tabindex="0" v-if="isVisible">This is my component<div>{{message}}</div>

Answer 3

我会使用像

这样的东西

mounted() {
  window.addEventListener('keyup', ev => {
    if (ev.keyCode === 27) {
      * Note keyCode 27 is ESC
      // do stuff here
    }
  })
}

Answer 4

假设您想要检测网页内任何位置按下转义键的时间，请在应用程序为mounted（而非created）时向应用程序（而非组件）添加eventlistener。出于演示的目的，我使用了event bus来展示组件如何收到escape-key-pressed事件。

（要测试此代码段，请先单击输出窗口）

＆＃13;

Vue.component('custom-component', {
  template: `
    <div>
      <div v-show="show">
        Hide when Escape Key is pressed.
      </div>
      <button v-on:click="reset()">Reset</button>
    </div>`,
  data() {
    return {
      show: true
    }
  },
  created() {
    window.eventBus.$on('escape-key-pressed', (val) => {
      this.show = false
      alert("escape key is pressed")
    })
  },
  methods: {
    reset() { this.show = true }
  }
});

window.eventBus = new Vue({})

const app = new Vue({
  el: "#app",
  mounted() {
    window.addEventListener('keyup', this.handler);    
  },
  destroyed() {
    window.removeEventListener('keyup', this.handler)
  },
  methods: {
    handler() {
      // If escape key is pressed...
      if (event.keyCode == 27) { 
        window.eventBus.$emit('escape-key-pressed', true);
      }
    }
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
   Example
   <custom-component></custom-component>
</div>

＆＃13;

Answer 5

<div @keyup.27="callYourMethod"></div>

27是逃避。所以你可以使用其他任何东西。只是谷歌找到密钥的相应代码并使用它

Vuejs：如何在keyup escape上隐藏组件<div>？

5 个答案: