Как захватить ключевое событие на холсте в Vue

Я экспериментировал с этим некоторое время и обнаружил, что браузеры не позволяют фокусироваться на холсте по умолчанию. Любой другой активный элемент, такой как нажатая кнопка или активная форма, будет отлично реагировать на события keyup.

Тем не менее, есть свойство, называемое tabindex , которое указывает, можно ли что-то сфокусировать и в каком порядке, если вы нажмете клавишу Tab (отсюда и название). Если мы установим tabindex на 0, то он будет сфокусирован по умолчанию. Я не смог найти документацию, объясняющую взаимодействие между холстом и фокусом клавиатуры. Кажется, что браузер обычно сопротивляется этому, в отличие от других типов элементов.

Это немного непостоянно, чтобы продемонстрировать в этом фрагменте, потому что это в основном утверждение tabindex для окна. Возможно, вам придется нажать на синюю область, чтобы она сработала здесь, прежде чем нажать Escape.

Vue.config.productionTip = false;
new Vue({
  template: `<div>
    <canvas tabindex="0" v-on:keyup.esc="abortThing" style="width:100px;height:100px;background-color:blue"></canvas>
</div>`,
  methods: {
    abortThing(event) {
      console.log(event);
    }
  }
}).$mount("#app");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>