2016-07-17 37 views

risposta

7

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> 
+0

Questa risposta sembra avere un discreto numero di punti di vista e ancora dovrebbe essere abbastanza rilevante, ma date un'occhiata al seguente link, se si vuoi tasti di scelta rapida completamente basati su finestre completamente globali (circa a metà strada): https://vuejsdevelopers.com/2017/05/01/vue-js-cant-help-head-body/ –

Problemi correlati