Come impostare keyup su tutta la pagina in Vue.js

Question

È possibile impostare un v-on:keyup.enter sull'intera pagina, non solo per un elemento di input in javascript framework Vue.js?

Answer 1

La risposta breve è sì, ma in base al contesto. Se si utilizza vue-router come sono su un progetto corrente, si vorrà aggiungere all'elemento più esterno a cui si desidera applicare. Nel mio caso sto usando l'elemento div iniziale del punto di ingresso effettivo dell'app.vue.

C'è un problema che ritengo sia un requisito difficile, l'elemento deve essere all'interno degli elementi potenzialmente focalizzabili. Il modo in cui ho a che fare è impostare un tabindex -1 e dichiarare semplicemente i miei super-hotkey (principalmente per scopi di debug in questo momento) sull'elemento padre nella mia app.

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

---

EDIT:

Come nota a margine, ho anche aggiunto un tocco di ulteriore configurazione alla mia Vue-router per assicurarsi che l'elemento giusto si concentra quando ho transizione pagine. Ciò consente allo scorrimento pagina/paginazione di essere già nella sezione destra in base all'area del contenuto che è l'unica sezione scorrevole. Dovresti anche aggiungere tabindex = "- 1" all'elemento di contenuto dell'app.

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

e la base della mia componente app-contenuti:

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