Skip to content

useKeyModifier

Category
Export Size
587 B
Last Changed
last year

响应式地跟踪修饰键状态。跟踪任何支持的修饰键的状态 - 请参阅浏览器兼容性说明。

通过 Vue School 的这个免费视频课程来学习 useKeyModifier!

Demo

大写锁定
数字锁定
滚动锁定
Shift
Ctrl
Alt

使用方法

ts
import { useKeyModifier } from '@vueuse/core'

const capsLockState = useKeyModifier('CapsLock')

console.log(capsLockState.value)

事件

您可以自定义哪些事件将触发状态更新。默认情况下,这些事件是 mouseupmousedownkeyupkeydown。要自定义这些事件:

ts
import { useKeyModifier } from '@vueuse/core'

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

console.log(capsLockState) // null

// 通过按键开启大写锁定
console.log(capsLockState) // null

// 鼠标按钮被点击
console.log(capsLockState) // true

初始状态

默认情况下,返回的 ref 将是 Ref<boolean | null>,直到收到第一个事件为止。您可以通过以下方式明确地将初始状态传递给它:

ts
const capsLockState1 = useKeyModifier('CapsLock') // Ref<boolean | null>
const capsLockState2 = useKeyModifier('CapsLock', { initial: false }) // Ref<boolean>

类型声明

typescript
export type KeyModifier =
  | "Alt"
  | "AltGraph"
  | "CapsLock"
  | "Control"
  | "Fn"
  | "FnLock"
  | "Meta"
  | "NumLock"
  | "ScrollLock"
  | "Shift"
  | "Symbol"
  | "SymbolLock"
export interface UseModifierOptions<Initial> extends ConfigurableDocument {
  /**
   * 触发修改器状态更新的事件名称
   *
   * @default ['mousedown', 'mouseup', 'keydown', 'keyup']
   */
  events?: WindowEventName[]
  /**
   * 返回的 ref 的初始值
   *
   * @default null
   */
  initial?: Initial
}
export type UseKeyModifierReturn<Initial> = Ref<
  Initial extends boolean ? boolean : boolean | null
>
export declare function useKeyModifier<Initial extends boolean | null>(
  modifier: KeyModifier,
  options?: UseModifierOptions<Initial>,
): UseKeyModifierReturn<Initial>

Source

SourceDemoDocs

贡献者

Anthony Fu
丶远方
Jelf
Joe Maylor

变更日志

No recent changes

Released under the MIT License.

Build faster with AI
New Masterclass to help you leverage AI in your Vue workflow.
Get Early Access