Null Pointer Micromanagement

    vue-keypress
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.1 • Public • Published

    Downloads Version License

    Vue Keypress

    Want to capture keydown, keypress and keyup and events globally in Vue? Nothing easier than that.

    The Vue Keypress Component let's you do just that.

    Just add the component to the view/component that should start a global keypress handler. When the component gets destroyed, the global event handler also gets removed.

    ‼️ BREAKING CHANGES: v1.x to v2 Migration

    • Event @pressed is now called @success
    • Prop event is now called keyEvent
    • The @pressed event (or now @success event) returns now an object with all the info and more

    How to install?

    yarn add vue-keypress
    // or
    npm i vue-keypress

    How to use in your project?

    Import the component in any .vue file like so:

    ...
    components: {
      Keypress: () => import('vue-keypress')
    }
    ...

    Simple Usage

    <template>
      <Keypress key-event="keyup" :key-code="13" @success="someMethod" />
    </template>
     
    <script>
    export default {
      components: {
        Keypress: () => import('vue-keypress')
      },
      methods: {
        someMethod(response) {
          // Do something
        }
      }
    }
    </script>

    Props

    Prop Type Default Possible Values Description
    keyEvent String 'keyup' keydown, keypress, keyup
    keyCode Number null see here Key that should trigger the event. If null, any key will trigger event.
    modifiers Array [] ['ctrlKey', 'shiftKey', 'altKey', 'metaKey'] Keys that needs to be pressed down before the actual key (key Code), e.g. Ctrl+A.
    preventDefault Boolean false true,false Prevent the default action of the event
    multipleKeys Array [] See example in 'Multiple Keys' Allows you to define multiple keyCode/modifier combinations per keyEvent.

    If you use multipleKeys, all the other props (except keyEvent) become redundant.

    Events

    Event Description
    @success Get's emitted when the defined key/modifiers were pressed.
    @wrong Get's emitted when the wrong key(s) or modifier(s) was/were pressed.
    @any Get's emitted with any keypress in any case.

    All of them return a payload like so:

    {
      event: Object, // the official event object
      expectedEvent: Object, // your defined props.
      message: String // A declarative message on error/success.
    }

    Multiple Keys

    The multiple-keys prop allows for defining multiple keys (or key-modifier combinations) per key-event that can be pressed for success.

    All the other props except key-event become redundant.

    <template>
      <Keypress key-event="keyup" :multiple-keys="multiple" @success="someMethod" />
    </template>
     
    <script>
    export default {
      components: {
        Keypress: () => import('vue-keypress')
      },
      data: () => ({
        multiple: [
            {
              keyCode: 65, // A
              modifiers: ['shiftKey'],
              preventDefault: true,
            },
            {
              keyCode: 83, // S
              modifiers: ['shiftKey'],
              preventDefault: false,
            },
          ],
      }),
      methods: {
        someMethod(response) {
          // Do something
        }
      }
    }
    </script>

    Multiple Key Events

    Multiple key events means that multiple event handlers for each evennt need to be registered. To do this, simply put your props in an array and register the component multiple times, like so:

    <template>
        <Keypress
          v-for="keypressEvent in keypressEvents"
          :key="keypressEvent.id"
          :key-event="keypressEvent.keyEvent"
          :multiple-keys="keypressEvent.multipleKeys"
          @success="someMethod"
        />
    </template>
     
    <script>
    export default {
      components: {
        Keypress: () => import('vue-keypress'),
      },
      data() {
        return {
          keypressEvents: [
            {
              keyEvent: 'keydown',
              multipleKeys: [
                {
                  keyCode: 65, // A
                  modifiers: ['shiftKey'],
                  preventDefault: true,
                },
                {
                  keyCode: 83, // S
                  modifiers: ['shiftKey'],
                  preventDefault: false,
                },
              ],
            },
            {
              keyEvent: 'keyup',
              multipleKeys: [
                {
                  keyCode: 65, // A
                  modifiers: ['shiftKey'],
                  preventDefault: true,
                },
                {
                  keyCode: 83, // S
                  modifiers: ['shiftKey'],
                  preventDefault: false,
                },
              ],
            },
          ],
        }
      },
      methods: {
        someMethod(response) {
          // Do something
        }
      },
    }
    </script>
     

    Typescript Support

    Add the following to your tsconfig.json:

        "types"[
          "vue-keypress"
        ]

    Install

    npm i vue-keypress

    DownloadsWeekly Downloads

    2,834

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    88.9 kB

    Total Files

    11

    Last publish

    Collaborators

    • lupas