vue-keypress v2.1.2

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

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

Events

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"
    ]