onKeyStroke

类别

Sensors

导出大小

728 B

示例

源代码在线运行

Use the arrow keys or w a s d keys to control the movement of the ball.

Repeated events are ignored on the key `d` or `->`.

用法

🌐 Usage

import { onKeyStroke
 } from '@vueuse/core'

onKeyStroke
('ArrowDown', (e
) => {
  e
.preventDefault
()
})

请参见此表获取所有键码。

🌐 See this table for all key codes.

返回值

🌐 Return Value

返回一个停止函数以移除事件监听器。

🌐 Returns a stop function to remove the event listener.

const stop
 = onKeyStroke('Escape', handler)

// Later, stop listening
stop
()

聆听多个键

🌐 Listen To Multiple Keys

import { onKeyStroke
 } from '@vueuse/core'

onKeyStroke
(['s', 'S', 'ArrowDown'], (e
) => {
  e
.preventDefault
()
})

// listen to all keys by passing `true` or skipping the key parameter
onKeyStroke
(true, (e
) => {
  e
.preventDefault
()
})
onKeyStroke
((e
) => {
  e
.preventDefault
()
})

自定义键谓词

🌐 Custom Key Predicate

你可以传入自定义函数来确定哪些按键应该触发处理程序。

🌐 You can pass a custom function to determine which keys should trigger the handler.

import { onKeyStroke
 } from '@vueuse/core'

onKeyStroke
(
  e
 => e
.key
 === 'A' && e
.shiftKey
,
  (e
) => {
    console
.log
('Shift+A pressed')
  },
)

自定义事件目标

🌐 Custom Event Target

import { onKeyStroke
 } from '@vueuse/core'

onKeyStroke
('A', (e
) => {
  console
.log
('Key A pressed on document')
}, { target
: document
 })

忽略重复事件

🌐 Ignore Repeated Events

回调只会在按下 A 并按住时触发一次。dedupe 选项也可以是响应式的 ref。

🌐 The callback will trigger only once when pressing A and holding down. The dedupe option can also be a reactive ref.

import { onKeyStroke
 } from '@vueuse/core'

onKeyStroke
('A', (e
) => {
  console
.log
('Key A pressed')
}, { dedupe
: true })

参考：KeyboardEvent.repeat

🌐 Reference: KeyboardEvent.repeat

被动模式

🌐 Passive Mode

将 passive: true 设置为使用被动事件监听器。

🌐 Set passive: true to use a passive event listener.

import { onKeyStroke
 } from '@vueuse/core'

onKeyStroke
('A', handler, { passive
: true })

指令用法

🌐 Directive Usage

vue

<script setup lang="ts">
import { vOnKeyStroke
 } from '@vueuse/components'

function onUpdate
(e
: KeyboardEvent) {
  // impl...
}
</script>

<template>
  <input
 v-on-key-str
oke:c,v
="onUpdate
" type
="text">
  <!-- with options -->
  <input
 v-on-key-str
oke:c,v
="[
onUpdate
, { 
eventName
: 'keyup' }]
" type
="text">
</template>

自定义键盘事件

🌐 Custom Keyboard Event

onKeyStroke
('Shift', (e
) => {
  console
.log
('Shift key up')
}, { eventName
: 'keyup' })

或者

🌐 Or

onKeyUp
('Shift', () => console
.log
('Shift key up'))

速记

🌐 Shorthands

onKeyDown - onKeyStroke(key, handler, {eventName: 'keydown'}) 的别名
onKeyPressed - onKeyStroke(key, handler, {eventName: 'keypress'}) 的别名
onKeyUp - onKeyStroke(key, handler, {eventName: 'keyup'}) 的别名

onKeyStroke ​

示例 ​

用法 ​

返回值 ​

聆听多个键 ​

自定义键谓词 ​

自定义事件目标 ​

忽略重复事件 ​

被动模式 ​

指令用法 ​

自定义键盘事件 ​

速记 ​