Electron-Vue中@keyup事件未触发，ALT+C快捷键无法聚焦v-text-field

我之前也碰到过类似的场景，Vue原生键盘事件在Electron里处理全局快捷键确实容易踩坑，结合你的情况，咱们一步步来解决：

1. 为什么@keyup事件没触发？ #

Vue的@keyup这类键盘事件是绑定在特定DOM元素上的，只有当该元素处于焦点状态时，事件才会被捕获。但你需要的是全局快捷键（不管当前焦点在哪都能触发），这时候就得用Electron提供的globalShortcut API来注册，而不是依赖Vue的DOM事件。

2. 正确的实现步骤 #

步骤1：在主进程中注册全局快捷键 #

打开Electron的主进程文件（通常是src/main/index.js），引入globalShortcut并在App就绪后注册快捷键，然后通过IPC通知渲染进程执行聚焦操作：

const { app, BrowserWindow, globalShortcut, ipcMain } = require('electron')

let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({ /* 你的窗口配置 */ })

  // 注册ALT+C快捷键
  app.whenReady().then(() => {
    globalShortcut.register('Alt+C', () => {
      // 向渲染进程发送聚焦指令
      mainWindow.webContents.send('focus-custom-textfield')
    })
  })

  // 记得在应用退出时注销所有快捷键，避免内存泄漏
  app.on('will-quit', () => {
    globalShortcut.unregisterAll()
  })
}

步骤2：在Vue组件中监听IPC事件并实现聚焦 #

在你的Vue组件里，首先确保自定义的v-text-field组件暴露了聚焦方法，然后监听IPC消息触发聚焦：

自定义v-text-field组件内部（比如CustomTextField.vue）

给内部的input元素添加ref，并暴露一个聚焦方法：

<template>
  <v-text-field ref="input" v-bind="$attrs" v-on="$listeners"></v-text-field>
</template>

<script>
export default {
  methods: {
    focus() {
      // 用$nextTick确保DOM已更新，再执行聚焦
      this.$nextTick(() => {
        if (this.$refs.input) {
          // 如果是Vuetify的v-text-field，需要获取内部的原生input元素
          this.$refs.input.$el.querySelector('input').focus()
        }
      })
    }
  }
}
</script>

父组件中调用聚焦方法

在使用自定义组件的父组件里，监听IPC事件并调用组件的聚焦方法：

<template>
  <CustomTextField ref="customInput"></CustomTextField>
</template>

<script>
import { ipcRenderer } from 'electron'
import CustomTextField from './CustomTextField.vue'

export default {
  components: { CustomTextField },
  mounted() {
    // 监听主进程发送的聚焦指令
    ipcRenderer.on('focus-custom-textfield', () => {
      this.$refs.customInput.focus()
    })
  },
  beforeDestroy() {
    // 组件销毁时移除IPC监听，避免内存泄漏
    ipcRenderer.removeAllListeners('focus-custom-textfield')
  }
}
</script>

3. 为什么之前的$nextTick无效？ #

大概率是因为你没有正确获取到自定义组件内部的原生input元素：

• 如果直接给自定义组件加ref，拿到的是组件实例，不是原生DOM
• Vuetify的v-text-field内部还有一层包装，需要通过$el.querySelector('input')找到真正的输入框元素

通过上面的方式，先在自定义组件内部封装好聚焦逻辑，再从外部调用，就能确保$nextTick生效了。

4. 测试验证 #

启动Electron应用后，不管当前焦点在哪个元素上，按下ALT+C都应该能让你的自定义输入框获得焦点，和按钮触发的效果一致。

内容的提问来源于stack exchange，提问作者Un1