无法@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

只有当div 具有焦点时，div 才会检测到 keyup 事件，因此您必须设置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>

Answer 2

如果您查看文档，您会发现输入中使用@keyup。在您的情况下 - 您正在使用它来div，并且没有关注它，因此无法进行键控。但是，您需要添加一些东西才能使其正常工作。请阅读此内容