无法将@keyup 侦听器添加到布局组件

Question

所以我在 nuxt 架构中有我的外部 default.vue 布局。我正在尝试将 @keyup.esc="test" 添加到 default.vue:

的外部元素

<template>
    <div @keyup.esc="test">
        <navigation></navigation>
        <nuxt/>
        <transition name="fade">
            <overlay-modals v-if="showModalLogin || showModalRegister"></overlay-modals>
        </transition>
        <transition name="zoom">
            <div class="modal__outer" v-if="showModalRegister || showModalLogin">
                    <modal-login v-if="showModalLogin"></modal-login>
                    <modal-register v-if="showModalRegister"></modal-register>
            </div>
        </transition>
    </div>
</template>

methods: {
    test() {
        alert('come on...');
    },

测试方法从未触发，这让我很困惑。

Answer 1

如果你查看 documentation u will see that @keyup used in inputs. In your case - u are using this to div, and there is no focus on it so keyup will not possible. However u need to add some stuff to make it working. Please read this

Answer 2

keyup事件只有在div有焦点时才会被div检测到，所以你必须设置tabindex让它可以聚焦，而且你必须给它重点.

new Vue({
  el: '#app',
  methods: {
    test() {
      console.log("Come on");
    }
  },
  mounted() {
    this.$el.focus();
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app" @keyup.esc="test" tabindex="0">
  Here is my div
</div>

无法将@keyup 侦听器添加到布局组件

Not able to add @keyup listener to layout component

keyup

vue.js

vuejs2

nuxt.js