VUE全局热键，快捷键解决方案

最新推荐文章于 2024-09-08 09:50:38 发布

AsdQwerR

最新推荐文章于 2024-09-08 09:50:38 发布

阅读量1.8k

点赞数

分类专栏： VUE 文章标签： vue js

本文链接：https://blog.youkuaiyun.com/lqldir/article/details/114358694

版权

本文介绍了如何在Vue项目中利用keymaster组件实现全局热键功能。通过安装keymaster，创建名为plugShortCut.js的插件，并在main.js中引入并定义Vue的全局属性，开发者能够在.vue组件内直接使用快捷键。例如，可以将CTRL+S和CMD+S绑定到提交方法，同时也讲解了快捷键的解绑操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里说的是用keymaster这个组件来解决VUE下网页全局热键的方案。
首先安装keymaster

npm i keymaster -S
or
yarn add keymaster -S

然后，编写个插件
plugShortCut.js

/*
* @info: 文件说明：VUE全局热键
* @Description: 全局功能介绍和注意事项
* @Author: tt
* @Date: 2020-11-16 15:11:29
* @LastEditTime: 2020-11-16 18:25:04
* @LastEditors: tt
*/
/*jshint esversion: 6 */
import Vue from 'vue';
import keymaster from 'keymaster';

const bindKeyHandler = (fn, param) => {
      return () => {
            fn(param);
            return false;
      }
}
keymaster.filter = function(event){
  var tagName = (event.target || event.srcElement).tagName;
  //根据tagName定
  return true;