vue中使用 HotKeys.js 教程(按键响应、快捷键开发)

简介: vue中使用 HotKeys.js 教程(按键响应、快捷键开发)

安装

cnpm i hotkeys-js --save


无 cnpm ,请先执行 npm i cnpm 安装cnpm

导入

import hotkeys from "hotkeys-js";

响应指定按键

如按下 a 时,打印 a

  mounted() {
    hotkeys("a", () => {
      console.log("a");
    });
  },

如按下 Ctrl+c 时,打印 Ctrl+c

    hotkeys("ctrl+c", () => {
      console.log("ctrl+c");
    });

若多个按钮执行相同的逻辑,则用 , 隔开即可

    hotkeys("a,b", () => {
      console.log("按下了 a 或 b");
    });

兼容苹果操作系统

苹果操作系统中的复制组合键为 command+c

    hotkeys("ctrl+c,command+c", () => {
      console.log("此组合键通常用于复制");
    });

vue3 + ts 中使用

 

目录
相关文章
|
5天前
|
JSON JavaScript 数据格式
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
17 3
|
3天前
|
JavaScript API
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
若依没解构送post请求出现的bug,vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: (0 , _inde
|
3天前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
5 0
|
5天前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
10 0
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
11 2
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
12 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
8 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
12 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的二手物品交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的二手物品交易平台附带文章源码部署视频讲解等
10 1