vue-mac-keyboard
Macbook computer keyboard style for vue component.
install
# npm
npm i @elonehoo/vue-mac-keyboard
# yarn
yarn add @elonehoo/vue-mac-keyboard
# pnpm
pnpm i @elonehoo/vue-mac-keyboard
quick start
<script setup lang="ts">
import macKeyboard, { KeyCodeData } from '@elonehoo/vue-mac-keyboard'
const keycode: number[] = $ref([])
function macMousedown(el: HTMLLIElement, item: KeyCodeData) {
if (item.keycode > -1)
keycode.push(item.keycode)
}
function macMouseup(el: HTMLLIElement, item: KeyCodeData) {
keycode.splice(0, keycode.length)
}
</script>
<template>
<div style="margin-top:10px">
<macKeyboard :key-code="keycode" @mac-mousedown="macMousedown" @mac-mouseup="macMouseup" />
</div>
</template>
api
props
prop |
type |
default |
description |
key-code |
number[] |
[] |
keycode |
events
event |
type |
description |
mac-mousedown |
function(el:HTMLLIElement,item:KeyCodeData) |
mousedown function |
mac-mouseup |
function(el:HTMLLIElement,item:KeyCodeData) |
mouseup function |
type
interface KeyCodeData {
keycode: number
name: string[]
}
license
MIT © Elone Hoo