vue-mac-keyboard

⌨️ Macbook computer keyboard style for VueJS component.

Playground

playground

Install

npm:

npm i vue-mac-keyboard

yarn

yarn add vue-mac-keyboard

pnpm

pnpm add vue-mac-keyboard

Screenshot

Usage

Local Component

<script lang="ts" setup>
import { ref } from 'vue'
import { MacKeyboard } from 'vue-mac-keyboard'
import 'vue-mac-keyboard/style'
import type { KeycodeData } from 'vue-mac-keyboard'

const keycode = ref([])
</script>

<template>
  <MacKeyboard v-model:keycode="keycode" />
</template>

Global component registed via plugin

import { createApp } from 'vue'
import MacKeyboard from 'vue-mac-keyboard'
import App from '@/App.vue'
import 'vue-mac-keyboard/style'

const app = createApp(App)

app.use(MacKeyboard)

app.mount('#app')

Use it in component:

<script lang="ts" setup>
import { ref } from 'vue'
import type { KeycodeData } from 'vue-mac-keyboard'

const keycode = ref([])

function onKeycodeDown(keycodeData: KeycodeData) {
  keycode.value = [keycodeData.keycode]
}
function onKeycodeUp(keycodeData: KeycodeData) {
  keycode.value = []
}
</script>

<template>
  <MacKeyboard
    @keycode-down="onKeycodeDown"
    @keycode-up="onKeycodeUp"
    :keycode="keycode"
  />
</template>

Props

keycode/v-model:keycode

• type: number[]
• default: []

Highlighted keys.

See keycodeDataList for all available keycodes.

disabled

• type: boolean
• default: undefined

Disable the keyboard from interacting.

Events

keycodeDown

• type: (keycodeData: KeycodeData) => void

Triggered when a keycode is pressed.

keycodeUp

• type: (keycodeData: KeycodeData) => void

Triggered when a keycode is released.

Interfaces

interface KeycodeData {
  /**
   * keycode of the key
   */
  keycode: number

  /**
   * key names, used for rendering UI
   */
  name: string[]
}

Credits

• uiwjs/react-mac-keyboard created by jaywcjlove

Changelog

See releases

License

MIT License © 2024-PRESENT ntnyq