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


Log in to reply