Vue setup 组合式 API 怎么编写封装键盘快捷键监听的函数-Vue.js-PHP中文网

vue 3 中 usekeyboardshortcut 封装快捷键监听，通过 onmounted/onunmounted 管理生命周期，支持组合键解析（如 "ctrl+s"）、动态启停、多快捷键绑定及作用域限定。

vue setup 组合式 api 怎么编写封装键盘快捷键监听的函数

在 Vue 3 的 setup 中封装键盘快捷键监听，核心是用 onMounted 和 onUnmounted 管理事件生命周期，并通过 ref 或 reactive 暴露状态和控制方法。关键在于避免重复绑定、支持组合键（如 Ctrl+S）、可动态启用/禁用，且不污染全局。

定义快捷键配置与匹配逻辑

快捷键本质是判断 event.key、event.ctrlKey、event.altKey、event.metaKey、event.shiftKey 的组合。建议把快捷键规则写成可读性高的字符串（如 "Ctrl+S"），再解析匹配：

统一转为小写处理，忽略大小写差异（S 和 s 都匹配）
支持常见别名： "Cmd" → metaKey（macOS），"Ctrl" → ctrlKey
用 event.code 更稳定（如 "Enter"），但 key 更直观（如 "s"），推荐优先用 key，特殊场景（如防止输入法干扰）再切 code

封装 useKeyboardShortcut 函数

返回一个响应式对象，含 isActive 控制开关、bind 手动绑定、unbind 清理，以及快捷键触发回调：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

import { onMounted, onUnmounted, ref, reactive } from 'vue'

export function useKeyboardShortcut() {
  const isActive = ref(true)
  const listeners = reactive(new Map())

  const normalizeKey = (key) => key.toLowerCase()
  const parseShortcut = (shortcut) => {
    const parts = shortcut.split('+').map(s => s.trim())
    return {
      key: normalizeKey(parts.pop()),
      ctrl: parts.includes('Ctrl') || parts.includes('Control'),
      alt: parts.includes('Alt'),
      shift: parts.includes('Shift'),
      meta: parts.includes('Cmd') || parts.includes('Meta')
    }
  }

  const matches = (e, config) => {
    if (e.key.toLowerCase() !== config.key) return false
    if (config.ctrl && !e.ctrlKey) return false
    if (config.alt && !e.altKey) return false
    if (config.shift && !e.shiftKey) return false
    if (config.meta && !e.metaKey) return false
    return true
  }

  const addListener = (shortcut, handler) => {
    const config = parseShortcut(shortcut)
    const listener = (e) => {
      if (!isActive.value) return
      if (matches(e, config)) {
        e.preventDefault()
        handler(e)
      }
    }
    window.addEventListener('keydown', listener)
    listeners.set(shortcut, { handler, listener })
  }

  const removeListener = (shortcut) => {
    const entry = listeners.get(shortcut)
    if (entry) {
      window.removeEventListener('keydown', entry.listener)
      listeners.delete(shortcut)
    }
  }

  const bind = (shortcut, handler) => {
    addListener(shortcut, handler)
  }

  const unbind = (shortcut) => {
    removeListener(shortcut)
  }

  const clearAll = () => {
    listeners.forEach((_, shortcut) => removeListener(shortcut))
  }

  onMounted(() => {
    // 自动清理（可选）
  })

  onUnmounted(() => {
    clearAll()
  })

  return {
    isActive,
    bind,
    unbind,
    clearAll
  }
}

在组件中使用

直接解构调用，支持多个快捷键，也支持运行时启停：

import { defineComponent, onMounted } from 'vue'
import { useKeyboardShortcut } from './useKeyboardShortcut'

export default defineComponent({
  setup() {
    const { isActive, bind, unbind } = useKeyboardShortcut()

    const onSave = () => console.log('保存触发')
    const onUndo = () => console.log('撤销触发')

    onMounted(() => {
      bind('Ctrl+S', onSave)
      bind('Ctrl+Z', onUndo)
      // 支持 Cmd+S（macOS）
      bind('Cmd+S', onSave)
    })

    const toggleShortcut = () => {
      isActive.value = !isActive.value
    }

    return () => (
      <div>
        <button onclick="{toggleShortcut}">
          {isActive.value ? '禁用快捷键' : '启用快捷键'}
        </button>
      </div>
    )
  }
})