@yafh/use-tinykeys NPM

use-tinykeys

Vue composition API for listen keyboard event.

install

npm install @yafh/use-tinykeys

or usage yarn

yarn add @yafh/use-tinykeys

usage

import { useTinykeys } from '@yafh/use-tinykeys'
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // 监听单个键盘值
    const { enable } = useKeyStroke('Control+s', (event) => {
      console.log(event)
    })

    // 监听多个键盘值
    const { enable } = useKeyStroke(
      ['Control+s', 'Control+Shift+s'],
      (event) => {
        console.log(event)
      }
    )

    // 同时监听多个键盘事件
    const { enable } = useKeyStroke(
      'Control+s',
      (event) => {
        console.log(event)
      },
      {
        eventType: ['keydown', 'keyup'],
      }
    )

    // 分别监听多个键盘事件
    const { enable } = useKeyStroke('Control+s', {
      keydown: (event) => {
        console.log(event)
      },
      keyup: (event) => {
        console.log(event)
      },
    })

    // 针对不同平台监听不同键盘值
    const { enable } = useKeyStroke(
      {
        windows: 'Control+s',
        mac: ['Command+s', 'Command+Shift+s'],
      },
      (event) => {
        console.log(event)
      }
    )

    // 更换监听目标
    const { enable } = useKeyStroke(
      'Control+s',
      (event) => {
        console.log(event)
      },
      {
        target: document.body,
      }
    )
  },
})