useKeyModifier

リアクティブな修飾キーの状態。サポートされている修飾キーの状態を追跡します。ブラウザの互換性については、ノートを参照してください。

使用法

import { useKeyModifier } from '@vueuse/core'

const capsLockState = useKeyModifier('CapsLock')

console.log(capsLockState.value)

イベント

状態を更新するイベントをカスタマイズできます。デフォルトでは、mouseup、mousedown、keyup、keydownです。これらのイベントをカスタマイズするには：

import { useKeyModifier } from '@vueuse/core'

const capsLockState = useKeyModifier('CapsLock', { events: ['mouseup', 'mousedown'] })

console.log(capsLockState) // null

// Caps Lockがキー押下でオンになる
console.log(capsLockState) // null

// マウスボタンがクリックされる
console.log(capsLockState) // true

初期状態

デフォルトでは、最初のイベントが受信されるまで、返されるrefはRef<null>になります。初期状態を明示的に渡すことができます：

import { useKeyModifier } from '@vueuse/core'
// ---cut---
const capsLockState1 = useKeyModifier('CapsLock') // Ref<boolean | null>
const capsLockState2 = useKeyModifier('CapsLock', { initial: false }) // Ref<boolean>