Where do I find docs/info on custom keyboard shortcuts? (Solved)

mboeni

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

That’s part of Vue.

https://vuejs.org/v2/guide/events.html#Key-Codes

Scott

mboeni

@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…

s.molinari

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

mboeni

@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…

mboeni

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

s.molinari

That’s good to know for me too. Thanks!

Scott