No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    7
    1084
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mboeni
      mboeni last edited by 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

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        That’s part of Vue.

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

        Scott

        mboeni 1 Reply Last reply Reply Quote 0
        • mboeni
          mboeni @s.molinari last edited by

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

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            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 1 Reply Last reply Reply Quote 0
            • mboeni
              mboeni @s.molinari last edited by

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

              1 Reply Last reply Reply Quote 0
              • mboeni
                mboeni last edited by 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

                1 Reply Last reply Reply Quote 4
                • s.molinari
                  s.molinari last edited by

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

                  Scott

                  1 Reply Last reply Reply Quote 0
                  • First post
                    Last post