vue-mac-keyboard
v0.1.0
Published
Macbook computer keyboard style for VueJS component.
Downloads
15
Readme
vue-mac-keyboard
⌨️ Macbook computer keyboard style for VueJS component.
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 'vue-mac-keyboard/style'
import { MacKeyboard } from 'vue-mac-keyboard'
import { ref } from 'vue'
import type { KeycodeData } from 'vue-mac-keyboard'
const keycode = ref([])
</script>
<template>
<MacKeyboard v-model:keycode="keycode" />
</template>
Global component registed via plugin
import 'vue-mac-keyboard/style'
import { createApp } from 'vue'
import MacKeyboard from 'vue-mac-keyboard'
import App from '@/App.vue'
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