Where do I find docs/info on custom keyboard shortcuts? (Solved)
-
Hi There
I’d like to assign some custom keyboard shortcuts in my app. Can someone point me to the according documentation? I seem to have missed that so far. I want to handle them in code, not in the template…
Cheers,
Michael -
-
@s-molinari Yep, I’ve seen that, but I didnt’ find the proper way to do it in the script section. I.e. the correct syntax for something like
this.$root.$on(???)
for keyboard stuff… -
That’s not how Vue works AFAIK. I believe, if you want to control the events directly in the JS code, you’ll need to use render functions.
Scott
-
@s-molinari Hmm, okay. Perhaps Electron adds something to the mix here? I would be fine with the KB shortcuts only working in the Electron version…
-
Just in case anyone else is interested, here is how it works:
Add the following under
mounted
in your Vue file:document.addEventListener('keydown', this.keyListener)
and here is how the handler works:
keyListener: function (e) { if (e.key === '1' && (e.ctrlKey || e.metaKey)) { this.$root.$emit('userAlert', 'fatal', 'A message from the president', 'Obey the president!') } else if (e.key === '2' && (e.ctrlKey || e.metaKey)) { this.$root.$emit('userNotify', 'Ivey sent you a new message', '5 min ago.', 'notifications_active') } else if (e.key === '3' && (e.ctrlKey || e.metaKey)) { this.$root.$emit('showProgress', 0.35) } else if (e.key === '4' && (e.ctrlKey || e.metaKey)) { this.$root.$emit('showProgress', 0.70) } else if (e.key === '5' && (e.ctrlKey || e.metaKey)) { this.$root.$emit('showProgress', 1.00) } }
Works like a charm
Cheers,
Michael -
That’s good to know for me too. Thanks!
Scott