Jak ustawić keyup na całej stronie w Vue.js

Question

Czy jest możliwe ustawienie v-on:keyup.enter na całej stronie, nie tylko dla elementu wejściowego w strukturze javascript Vue.js?

Answer 1

Krótka odpowiedź brzmi "tak", ale w zależności od kontekstu. Jeśli używasz vue-routera, ponieważ jestem na bieżącym projekcie, chciałbyś dodać do najbardziej zewnętrznego elementu, który chcesz zastosować. W moim przypadku używam początkowego elementu div elementu początkowego app.vue.

Jest jeden haczyk, który moim zdaniem jest trudnym wymaganiem, element musi znajdować się w potencjalnie nadających się do ogniskowania elementach. Sposób, w jaki sobie z tym poradzę polega na ustawianiu -1 tabindex i właśnie zadeklarowaniu moich super-klawiszy (głównie do celów debugowania teraz) na elemencie nadrzędnym w mojej aplikacji.

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

---

EDIT:

Na marginesie, ja również dodać odrobinę dodatkowej konfiguracji do mojego vue-routera, aby upewnić się prawo elementem koncentruje kiedy przejście stron. Dzięki temu przewijanie stronicowania/stronicowania już znajduje się w prawej sekcji, w oparciu o obszar zawartości będący jedyną przewijaną sekcją. Trzeba również dodać tabindex = "- 1" również do elementu treści aplikacji.

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

i podstawą mojego składnika app-content:

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