Wie man Schlüssel auf der ganzen Seite in Vue.js einstellt

Question

Ist es möglich, eine v-on:keyup.enter auf der ganzen Seite nicht nur für ein Eingabeelement in Javascript Rahmen Vue.js zu setzen?

Answer 1

Kurze Antwort ist ja, aber wie hängt von Ihrem Kontext ab. Wenn Sie vue-router verwenden, während ich in einem aktuellen Projekt bin, möchten Sie dem äußersten Element hinzufügen, auf das Sie angewendet werden möchten. In meinem Fall verwende ich das ursprüngliche div-Element von app.vue entry point.

Es gibt einen Haken, den ich glaube, ist eine harte Anforderung, das Element muss innerhalb der potenziell fokussierbaren Elemente sein. Die Art, wie ich damit umgehe, ist das Setzen eines -1 Tabindexes und das Deklarieren meiner Super-Hotkeys (hauptsächlich für Debug-Zwecke) auf dem Elternelement in meiner App.

<template> 
    <div 
    id="app-main" 
    tabindex="-1" 
    @keyup.enter="doSomething" 
    > 
    <everything-else></everything-else> 
    </div> 
</template> 

---

EDIT:

Als Randbemerkung, habe ich auch noch einen Hauch von zusätzlichen Konfigurations meiner vue-Router das richtige Element, um sicherzustellen, fokussiert ist, wenn ich Seiten übergehen. Dies ermöglicht, dass der Bildlauf nach Bildlauf/Bildlauf bereits im rechten Abschnitt liegt, da der Inhaltsbereich der einzige Bildlaufabschnitt ist. Sie müssten auch das tabindex = "- 1" zum app-content-Element hinzufügen.

router.afterEach(function (transition) { 
    document.getElementById('app-content').focus(); 
}); 

und die Basis meiner App-Inhaltskomponente:

<template> 
    <div id="app-content" tabindex="-1"> 
    <router-view 
     id="app-view" 
     transition="app-view__transition" 
     transition-mode="out-in" 
    ></router-view> 
    </div> 
</template>