Czy jest możliwe ustawienie v-on:keyup.enter
na całej stronie, nie tylko dla elementu wejściowego w strukturze javascript Vue.js?Jak ustawić keyup na całej stronie w Vue.js
Odpowiedz
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>
- 1. Jak ustawić element na całej wysokości strony?
- 2. Jak poprawnie ustawić favicon.ico na projekcie vue.js?
- 3. Jak ustawić kierunek całej aplikacji na RTL?
- 4. CSS3 nth-of-type na całej stronie?
- 5. Jak słuchać zdarzeń kliknięcia na całej stronie w meteodzie?
- 6. ProcessCmdKey - czekać na KeyUp?
- 7. Ustalanie, czy element istnieje na całej stronie html
- 8. Jak ustawić Thread.CurrentPrincipal do użytku w całej aplikacji?
- 9. Jak ustawić styl dla całej kolumny w EPPlus?
- 10. Dodaj wydarzenie Vue.js na oknie
- 11. Jak zrobić tekst na całej jego szerokości?
- 12. KeyUp z JavaScript w Blackberry
- 13. Zdarzenie KeyUp na formularzu nie działa? C#
- 14. jak ustawić domyślne informacje o kulturze dla całej aplikacji C#
- 15. Vue.js na polu tekstowym focus na ładunku
- 16. Jak ustawić domyślne wybrane opcje na stronie szczegółów produktu magento
- 17. Złap KeyUp Event na WinForm C#
- 18. uwierzytelniania JWT z Vue.js
- 19. jQuery Cleditor uzyskać wartość textarea na keyup
- 20. Jak ustawić "pasek przewijania" po lewej stronie?
- 21. Jak opublikować bibliotekę komponentów Vue.js?
- 22. Jak uniknąć narzutu ciągłego żądania ajax na zdarzenie keyup?
- 23. Jak wyśrodkować ciało na stronie?
- 24. Jak skomentować kod w pliku vue.js?
- 25. jQuery .keyup() nie działa
- 26. Korzystanie Vue.js w laravel 5,3
- 27. pandas.factorize na całej ramce danych
- 28. „okno” nie zostało zdefiniowane w Vue.js 2
- 29. Statyczne zdjęcie src w szablonie Vue.js
- 30. Słuchaj niestandardowych wydarzeń w Vue.js
Ta odpowiedź wydaje się uzyskać sporo poglądów i nadal powinna być dość istotne, ale spojrzeć na poniższy link, jeśli chcą całkowicie w pełni globalnych skrótów klawiszowych opartych na oknach (około pół drogi w dół): https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/ –