defineShortcuts 정의 바로 가기

사용

자동으로 가져온 defineShortcuts컴포지블을 사용하여 키보드 단축키를 정의합니다.

<script setup lang="ts">
const open = ref(false)

defineShortcuts({
  meta_k: () => {
    open.value = !open.value
  }
})
</script>

• 바로 가기는 macOS가 아닌 플랫폼에서 자동으로 조정되어 meta를 ctrl로 변환합니다.
• 컴포지블은 VueUse의 useEventListener를 사용하여 키다운 이벤트를 처리합니다.
• 사용 가능한 바로 가기 키의 전체 목록은 KeyboardEvent.keyAPI 문서를 참조하십시오. 구성의 키는 대소문자를 구분하지 않으므로 meta_k 및 meta_K 모두 동일합니다.

API

defineShortcuts(config: MaybeRef<ShortcutsConfig>, options?: ShortcutsOptions): () => void @ {lang="ts-type"} @

응용 프로그램에 대한 키보드 바로 가기를 정의합니다. 구성 요소를 마운트 해제하기 전에 바로 가기를 중지해야 하는 경우를 대비하여 리스너를 제거하는 함수를 반환합니다.

파라미터

바로가기 정의

바로 가기는 다음 형식으로 정의됩니다.

• 단일 키: 'a'``'b'``'1' 등
• 키 조합: _를 사용하여 키를 분리합니다. 예를 들어 'meta_k', 'ctrl_shift_f'
• 키 시퀀스: -를 사용하여 시퀀스를 정의합니다(예: 'g-d').

수정자

• meta``command : macOS에서는 ⌘ Command 및 다른 플랫폼에서는 Ctrl를 나타냅니다.
• ctrl모든 플랫폼에서 Ctrl를 나타냅니다.
• shiftShift가 필요한 경우 알파벳 키에 사용
• alt``option macOS에서는 ⌥ Option 및 다른 플랫폼에서는 Alt를 나타냅니다. Option이 macOS에서 문자를 다시 쓰기 때문에 물리적 키 위치와 일치합니다

특수 키

특수 키를 일치시키려면 이러한 이름을 사용합니다.

• escapeEsc 키에서 트리거
• enter : 키 입력 시 트리거
• arrowleft``arrowright``arrowup``arrowdown : 각 화살표 키에서 트리거
• tab``tab: 탭 키 트리거
• backspaceBackspace 키에서 트리거됨
• delete``delete키 삭제 시 트리거
• space스페이스바에서 트리거됩니다. alt와 결합하지 않는 한 layoutIndependent가 필요합니다.

바로가기 설정

각 바로 가기는 함수 또는 객체로 정의할 수 있으며 다음 속성을 사용합니다.

interface ShortcutConfig { handler: (e?: KeyboardEvent) => void; usingInput?: boolean | string }

매개변수

예

기본적인 사용법

<script setup lang="ts">
defineShortcuts({
  '?': () => openHelpModal(),
  'meta_k': () => openCommandPalette(),
  'g-d': () => navigateToDashboard()
})
</script>

입력 포커스 처리

usingInput를 사용하여 특정 입력에 초점을 맞출 때만 바로 가기를 트리거합니다.

<template>
  <UInput v-model="query" name="queryInput" />
</template>

<script setup lang="ts">
const query = ref('')

defineShortcuts({
  enter: {
    usingInput: 'queryInput',
    handler: () => performSearch()
  },
  escape: {
    usingInput: true,
    handler: () => clearSearch()
  }
})
</script>

메뉴 항목에서 바로 가기 추출

extractShortcuts 유틸리티를 사용하여 메뉴 항목에서 바로 가기를 자동으로 정의합니다.