Vue Electron实现输入法自动刷字数功能详解

时间:2022-12-20 biaov 人气:0

思路：循环使用 robotjs 库模拟键盘点击，从而实现输入法刷自动刷字数的功能。

安装依赖

npm i robotjs

Vue代码

在 Vue 中编写一个文本域用来聚焦输入法焦点。
思路：当我们按下 S 键时，给 Electron 发送消息告诉 Electron 开始刷字数; 当我们按下 E 键时，告诉 Electron 停止自动刷。

<template>
  <textarea @keyup.stop="onKeyup"></textarea>
</template>
<script setup>
// 键盘输入
const onKeyup = e => {
  switch (e.code) {
    case 'KeyS':
      // 给 Electron 发送消息，开始刷字数
      // ipcRenderer.invoke('wordNum', { type: 'start'})
      break
    case 'KeyE':
      // 给 Electron 发送消息，结束刷字数
      // ipcRenderer.invoke('wordNum', { type: 'end' })
      break
    default:
      break
  }
}
</script>

Electron 代码

import robot from 'robotjs'
let wordNumStatus = true
// 开始刷数量
const startBrushNum = () => {
  setTimeout(() => {
    robot.keyTap('a') // a: 表示键盘 A 键
    wordNumStatus && startBrushNum()
  }, 1000)
}
// 键盘输入字数
const wordNumAction = ({ type }) => {
  switch (type) {
    case 'start':
      wordNumStatus = true
      startBrushNum()
      break
    case 'end':
      wordNumStatus = false
      break
  }
}

总结

通过以上思路可以确定关键点在于 robotjs 库触发键盘模拟点击。

所以更加简单的方法就是使用 NodeJs, 在 NodeJs 中引入 robotjs 库模拟点击，一样可以实现刷字数。

不过需要引入 keypress 来监听键盘输入（其中一种库，还有其它库可以监听）。

Electron + Vue 如果有代码细节不清楚，参考 Electron + Vue 实现源码

加载全部内容