Vue.js

Question

में पूरे पृष्ठ पर कीप सेट कैसे करें, क्या पूरे पृष्ठ पर v-on:keyup.enter सेट करना संभव है, न केवल जावास्क्रिप्ट ढांचे Vue.js में इनपुट तत्व के लिए?

Answer 1

संक्षिप्त उत्तर हाँ है, लेकिन आपके संदर्भ पर निर्भर करता है। यदि आप वर्तमान प्रोजेक्ट पर हैं, तो आप वू-राउटर का उपयोग कर रहे हैं, तो आप उस बाहरी-तत्व को जोड़ना चाहते हैं, जिसे आप चाहते हैं। मेरे मामले में मैं वास्तविक app.vue एंट्री पॉइंट के प्रारंभिक div तत्व का उपयोग कर रहा हूं।

एक ऐसा पकड़ है जो मुझे विश्वास है कि एक कठिन आवश्यकता है, तत्व संभावित रूप से केंद्रित तत्वों के भीतर होना चाहिए। जिस तरह से मैं इसके साथ काम कर रहा हूं वह एक -1 टैबिंडेक्स सेट कर रहा है और मेरे ऐप में मूल तत्व पर मेरी सुपर-हॉटकी (ज्यादातर अभी डीबग उद्देश्यों के लिए) घोषित कर रहा है।

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

---

संपादित करें:

एक तरफ ध्यान दें के रूप में, मैं भी अतिरिक्त विन्यास का एक स्पर्श मेरी Vue रूटर करने के लिए सुनिश्चित जब मैं पृष्ठों संक्रमण सही तत्व केंद्रित है बनाने के लिए जोड़ा। यह पेजअप/पेजडाउन स्क्रॉलिंग को सामग्री क्षेत्र के आधार पर केवल एक ही स्क्रोल करने योग्य अनुभाग के आधार पर सही अनुभाग में होने की अनुमति देता है। आपको ऐप-सामग्री तत्व में भी tabindex = "- 1" जोड़ना होगा।

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>