Vue.js'deki tüm sayfada anahtarlama nasıl ayarlanır

Question

Tüm sayfa üzerinde, yalnızca vavascript framework Vue.js'deki bir giriş öğesi için değil, v-on:keyup.enter ayarlamak mümkün müdür?

Answer 1

Kısa yanıt evet, ancak içeriğinize göre değişir. Geçerli bir projede olduğum gibi vue yönlendirici kullanıyorsanız, uygulanan en dıştaki öğeye eklemek istersiniz. Benim durumumda gerçek app.vue giriş noktasının ilk div öğesini kullanıyorum.

Zor bir gereklilik olduğuna inandığım bir yakalama var, elementin potansiyel olarak odaklanabilen unsurlar içinde olması gerekiyor. Bununla başa çıkma biçimim, -1 tabindex ayarlayarak ve sadece süper-hotkey'larımın (çoğunlukla şu anda hata ayıklama amaçları için) app'ımdaki ana öğede bildirilmesidir.

---

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

DÜZENLEME: Bir yan not olarak

, Ben de sayfaları geçiş yaparken doğru eleman odaklanmıştır emin olmak benim vue-yönlendiriciye ek yapılandırma bir dokunuş ekledi. Bu, sayfanın/pagedown kaydırmasının, yalnızca kaydırılabilir bölüm olan içerik alanına bağlı olarak doğru bölümde olmasını sağlar. Ayrıca, uygulama içerik öğesine de tabindex = "- 1" eklemeniz gerekir.

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

ve benim app-içerik bileşeninin temeli:

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