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

目录
  • 安装依赖
  • Vue代码
  • Electron 代码
  • 总结

思路：循环使用 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 实现源码

到此这篇关于Vue Electron实现输入法自动刷字数功能详解的文章就介绍到这了,更多相关Vue Electron自动刷字数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue与electron实现进程间的通信详情

    vue与electron实现进程间的通信详情

    目录 一.配置内容 1.进程间的通信 第一种方式引入ipcRenderer 第二种方式引入ipcRenderer 2.渲染进程常用配置 3.将ipcMain封装到一个js中统一处理 三.总结 前言: 本文主要介绍electron渲染进程和主进程间的通信,以及在渲染进程和主进程中常用的配置项. 一.配置内容 1.进程间的通信 渲染进程和主进程间的通信主要通过ipcRenderer和ipcMain这两个模块实现的,其中ipcRenderer是在渲染进程中使用,ipcMain在主进程中使用. 其中,渲

  • 用electron打包vue项目中的报错问题及解决

    用electron打包vue项目中的报错问题及解决

    目录 1.  首先一定要cd到项目的根目录 2.  接下来运行 如何用electron打包vue项目,请参见我的另一篇文章:如何用electron打包vue项目为桌面应用文件exe 这里,也要提到实际项目中的问题,可能有同志的目录结构和内容有些许差别,就我刚刚遇到的问题来说,常见的问题的有几个问题,以及解决办法如下: 1.  首先一定要cd到项目的根目录 (我这里是app)里面才能运行项目,再重新npm run build,不然的话很有可能出现 “ 系统找不到路径的问题 ”,成功的话会出现下面绿

  • vue electron实现无边框窗口示例详解

    vue electron实现无边框窗口示例详解

    目录 一.前言 二.实现方案 1.创建无边框窗口 2.创建windows窗口控件组件 三.后记 一.前言 无边框窗口是不带外壳(包括窗口边框.工具栏等),只含有网页内容的窗口.对于一个产品来讲,桌面应用带边框的很少,因为丑(我们的UI觉得--与我无关-.-).因此我们就来展开说下,在做无边框窗口时候需要注意的事项以及我踩过的坑. 二.实现方案 1.创建无边框窗口 要创建无边框窗口,只需在 BrowserWindow的 options 中将 frame 设置为 false: const { Bro

  • vue + electron应用文件读写操作

    vue + electron应用文件读写操作

    目录 vue + electron应用文件读写 正常操作流程 vue + electron应用文件读写 在使用electron制作桌面应用时,基本都会需要数据的存储. 如果要制作的应用并不复杂,完全可以将数据存储在本地文件当中,然后应用就可以通过这些文件进行数据的读写. 因为electron的主进程是支持node的,所以可以通过fs文件系统对文件完成读写操作. 正常操作流程 首先先创建一个vue项目, 可以使用vue cli进行创建 通过yarn serve命令测试是否能否运行成功,界面正常出现

  • Vue electron零基础使用教程

    Vue electron零基础使用教程

    需求:给vue项目加一个外壳(electron),顾名思义也就是使用electron应用程序运行vue项目,直接将写好上线的vue项目在线地址放入electron程序中即可 操作步骤: 1.构建:构建应用程序首先要先安装electron相关依赖包以及搭建框架.在这里就不详细赘述了,直接上官网看文档https://www.electronjs.org/zh/docs/latest/tutorial/quick-start 2.打包:此时就到了重要的时候,官方指定的是使用脚手架打包-----Elec

  • electron vue 模仿qq登录界面功能实现

    electron vue 模仿qq登录界面功能实现

    目录 1.使用vuecli创建vue项目 2.安装electron 3.vue项目安装Electron-builder打包工具 4.在vue项目的src下有个background.js文件 5.安装remote模块 6.代码 7.效果图 1.使用vuecli创建vue项目 我用的vue2 vue create qq_test 2.安装electron npm install electron -g //or npm install electron@12.0.11 //老版本 3.vue项目安装

  • 聊聊vue番茄钟与electron 打包问题

    聊聊vue番茄钟与electron 打包问题

    目录 序 动手 准备工作 功能规划 开发工具 开发过程 创建项目 配置项目 界面编写 主进程和渲染进程文件读存通信 打包 序 平时对自己学习工作计划安排可以使用番茄钟去规划. 番茄钟:一个很简单的时间管理方法,设置一个固定时间,根据自己情况调整,这个时间是一个倒计时,在这段时间内认真去做一件事情,然后一个番茄钟结束后,休息大概五分钟,重新番茄钟. 这可以帮助我们量化自己的工作和效率,提醒我们休息和工作. 本人之前在手机上下载过番茄钟的应用,但是使用了一段时间后发现对我来说并不能算十分合适,准备制

  • vue项目打包成桌面快捷方式(electron)的方法

    vue项目打包成桌面快捷方式(electron)的方法

    网上有很多相关的例子了,所以我只是把自己的问题记录一下. 1.把electron的官方例子clone下来 git clone https://github.com/electron/electron-quick-start 2.进入项目,输入以下命令,运行项目 npm install//下载依赖包 npm start//启动 3.弹出界面 4.接下来将自己的vue项目打包,运行npm run build 5.将打包的项目复制到electron-quick-start的根目录 6.重新运行一下 n

  • Vue electron前端开启局域网接口实现流程详细介绍

    Vue electron前端开启局域网接口实现流程详细介绍

    目录 一.主要实现原理 二.获取本机局域网IP 三.开启服务器 四.关闭服务器 五.简单演示 六.整体代码 七.展望 一.主要实现原理 electron本身就集成了Nodejs,简直是不要太舒服.直接用最基本的http模块开接口即可,也可以用express,看个人喜好.下面演示的是http模块. 二.获取本机局域网IP 首先要获取本机局域网的IP,这就是接口的IP地址了. // 获取本机的局域网IP function getServerIp() { let interfaces = os.net

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

    目录 安装依赖 Vue代码 Electron 代码 总结 思路:循环使用 robotjs 库模拟键盘点击,从而实现输入法刷自动刷字数的功能. 安装依赖 npm i robotjs Vue代码 在 Vue 中编写一个文本域用来聚焦输入法焦点. 思路:当我们按下 S 键时,给 Electron 发送消息告诉 Electron 开始刷字数; 当我们按下 E 键时,告诉 Electron 停止自动刷. <template> <textarea @keyup.stop="onKeyup&

  • Vue实现淘宝购物车三级选中功能详解

    Vue实现淘宝购物车三级选中功能详解

    最近在练习商城项目,记录下实现购物车三级选中的过程(小白一个,水平很菜) 效果图: 实现: 1.全选时所有商品+店铺全部选中:反之全部取消选中 2.店铺选中时,当前店铺内所有商品选中:反之取消选中 3.店铺内商品全选 → 所属店铺选中:反之取消选中店铺 4.店铺+所有商品全选 → 全选按钮选中:反之取消选中 首先说明一下,我使用了vuex来管理购物车数据,所有改变按钮状态的方法都写在mutaition里 const state = { cartList: [], // 购物车列表 totalCo

  • vue实现的仿淘宝购物车功能详解

    vue实现的仿淘宝购物车功能详解

    本文实例讲述了vue实现的仿淘宝购物车功能.分享给大家供大家参考,具体如下: 下面是一张众所周知的淘宝购物车页面,今天要讲解的案例就是用vue.js做一个类似的页面 首先简单介绍一下可能会用到的一些vue.js的用法: v-bind,绑定属性:例如v-bind:class="{'class1':flag}",这是常用的绑定样式的方法,如果flag为true则class=class1:v-bind:src="image",image就是图像的路径; v-if=&quo

  • Vue用户管理的增删改查功能详解

    目录 1.向api请求发出查询用户列表数据,渲染表单数据 2.通过v-model绑定查询数据,进行表单信息查询 3.通过改变布尔值,来控制打开取消添加用户对话框 4.通过动态绑定current-page和page-size,再绑定触发事件,查询指定多少条数据,进行数据分页 总结 1.向api请求发出查询用户列表数据,渲染表单数据 1.定义查询参数列表对象queryInfo:{} queryInfo: { query: '', // 查询 pagenum: 1, // 当前页数 pagesize:

  • 代号为Naruto的Vue 2.7正式发布功能详解

    目录 引言 向后移植的功能 注意事项 与 Vue 3 的行为差异 升级指南 Vue CLI / webpack Vite Volar 兼容性 Devtools 支持 2.7 版本的影响 额外细节 引言 Vue 正式发布了 2.7 版本, 版本名称为 Naruto,即火影忍者. 尽管现在 Vue 3 是默认版本,但由于仍有许多用户由于依赖兼容性.浏览器支持要求或没有足够的带宽升级而不得不继续使用 Vue 2.在 Vue 2.7 中,从 Vue 3 向后移植了一些最重要的功能,以便 Vue 2 用户

  • Vue+Vuex实现自动登录的知识点详解

    在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization 二.我们重新进入的时候,判断条件是只要有Authorization就可以直接进入了,但其实应该提交给服务器判断这个A

  • vue 实现网页截图功能详解

    vue 实现网页截图功能详解

    最近项目有一个需求,需要上传图片,但是客户上传的图片大小不一,所以我们需要规定客户的图片比例,但又需要是客户所需的,所以就想到了截图 实现效果 我们的架构是vue,所以用的是一个vue的截图插件 安装插件:npm install vue-cropper --save-dev 引入组件 import Vue from 'vue'; import { VueCropper } from "vue-cropper"; Vue.use(VueCropper) 核心代码 <div>

  • Python实现B站UP主自动监控功能详解

    Python实现B站UP主自动监控功能详解

    目录 开发工具 环境搭建 原理简介 1.确定小目标 2.模拟登录 3.自动关注 4.实时监控 效果展示 众所周知,B站有很多有趣的UP主,可以教大家一些"实用"的知识: 但是他们一般都没有固定的更新时间,那么如何才能第一时间知道自己又有新的饭点可以看的下饭素材呢?当然是用python来写个脚本自动监控UP是否更新了视频,并自动下载啦~ 废话不多说,让我们愉快地开始吧~ 开发工具 Python版本:3.7.8 相关模块: DecryptLogin模块: videofetch模块: 以及一

  • MyBatis-Plus实现公共字段自动填充功能详解

    MyBatis-Plus实现公共字段自动填充功能详解

    目录 1.问题分析 2.实现步骤 3. 实现字段全局填充 1.问题分析 我们在开发中经常遇到多个实体类有共同的属性字段,例如在用户注册时需要设置创建时间.创建人.修改时间.修改人等字段,在用户编辑信息时需要设置修改时间和修改人等字段.这些字段属于公共字段,也就是很多表中都有这些字段,能不能对于这些公共字段在某个地方统一处理,来简化开发呢? 答案就是我们可是使用Mybatis Plus提供的公共字段自动填充功能. 2.实现步骤 Mybatis Plus公共字段自动填充,也就是在插入或者更新的时候为

  • vue实现文字转语音功能详解

    目前h5新增一个文字转语音的功能(但是正在完善中,勉强能用),h5新增的SpeechSynthesisUtterance实例 首先new一个SpeechSynthesisUtterance对象 使用实例对象的一些属性,包括: text – 要合成的文字内容,字符串.lang – 使用的语言,字符串, 例如:"zh-cn"voiceURI – 指定希望使用的声音和服务,字符串.volume – 声音的音量,区间范围是0到1,默认是1.rate – 语速,数值,默认值是1,范围是0.1到1

随机推荐