Vue.jsの全ページにキーアップを設定する方法

Question

JavaScriptフレームワークVue.jsの入力要素だけでなく、ページ全体にv-on:keyup.enterを設定することはできますか？

Answer 1

短い答えは「はい」ですが、どのようにコンテキストに依存しますか。現在のプロジェクトでvue-routerを使用している場合は、適用する最も外側の要素に追加することをお勧めします。私の場合は、実際のapp.vueエントリポイントの最初のdiv要素を使用しています。

私は厳しい要件であると信じているキャッチがあります。その要素は、潜在的にフォーカス可能な要素の中になければなりません。私が扱っているのは、-1のtabindexを設定して、私のアプリの親要素にスーパーホットキーを宣言するだけです（主にデバッグ目的のためです）。

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

---

EDIT：サイドノートとして

、私はまた、私はページを遷移したときに右の要素がフォーカスされていることを確認するために私VUE-ルータに追加設定のタッチを追加しました。これにより、スクロール可能セクションであるコンテンツ領域に基づいて、ページアップ/ページダウンスクロールがすでに右側のセクションにあることが可能になります。また、tabindex = " - 1"をapp-content要素に追加する必要があります。

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

と私のアプリ・コンテンツ・コンポーネントの基礎：

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