前言

大家好，我是小张同学，今天是周六，又不知不觉的摸鱼了五天，时间可真快，下个星期咱继续摸鱼，哈哈哈，今天给大家分享的是，自己手写一个快捷键的功能，例如 ctrl+C（复制文本） , ctrl+S（保存当前编辑的内容）等等， 如果你觉的有用请点个Star，谢谢。

问题的起因

我正在做一个绘制流程图的一个项目，其主要作用就是绘制一些事情的整体流程，说来也巧，我们老大，让我自由发挥，所以我输出全靠自己幻想，大概是下面这个样子，可以看到有 剪切 ，复制 粘贴 编辑等等功能。

技术栈 ：Vue2全家桶，json-server，axios，vuedraggable,jsPlumb,等等

1：vuedraggable（一个能让节点可拖拽的库）: 给大家附上中文文档可以去学习一下www.itxst.com/vue-draggab…

2：jsPlumb（一个能让节点连接的库）：也给大家附上中文文档，学习一下 wdd.js.org/jsplumb-chi…

实现原理

其实我们做快捷键功能很简单，主要就是监听我们的键盘事件，当用户按下某些键时，去执行某些操作，接下来我们就开始写代码。

写代码

由于我们是在用vue进行全局键盘事件监听，所以监听键盘事件你可能需要在生命周期中进行监听

  created(){ /* 监听键盘事件*/   this.Shortcuts()},
  
  methods:{
       Shortcuts() {
       //定义一个变量 方便后面保存 事件对象
       let $Event = undefined;
      document.addEventListener("keydown", (e) => {
        // 将事件对象保存 
        $Event = e;
        // 将用户按下的键同义转换成大写
        const keyCode = $Event.key.toLocaleUpperCase();
        //
        `这里 比较重要 ,如果用户按下了 ctrl 键 
         那事件对象中ctrlKey 或者metaKey 状态都会变为 true
         这也是我们实现快捷键的最高效的方式   `
        const ctrlKey = $Event.ctrlKey || e.metaKey;
        //保存 用户按下的键，方便后续出传值
        const ShortcuGroupKey = { keyCode, ctrlKey };
        // 对应快捷键的方法，将用户按下的键传值传进去
        CtrlS(ShortcuGroupKey);
        CtrlD(ShortcuGroupKey);
        CtrlC(ShortcuGroupKey);
        CtrlV(ShortcuGroupKey);
        CtrlX(ShortcuGroupKey);
        // 如果用户按下的是一个键的话把 按下的键盘码传进去就好了
        Delete(keyCode);
      });
      // 封装一个方法 统一 取消默认行为
      const CancelPreventDefault = () => $Event.preventDefault();
      
     /* `封装一个工具函数 ，传键盘按下的键码和你想要匹配的键的字符和 需要调用的方法
     判断你按下的键和我传的键是否相等，如果相等 我调用刚刚传进来的方法`*/
      
      const ShortcuCtrls = (val, fn) => {
        const { ctrlKey, keyCode, ShortcuKey } = val;
        if (ctrlKey && keyCode === ShortcuKey) {
        //如果你按下的键和我相等 则调用该方法 其实这里最好的调用是
          fn();
          // 调用成功后取消默认行为 用我自己写的快捷键功能
          CancelPreventDefault();
        }
      };
      // 下面就是 每个快捷键 需要执行的操作
      
     // 我 ctrl + S 实现了 当前文档保存的功能
      
      const CtrlS = (val) =>
        ShortcuCtrls({ ...val, ShortcuKey: "S" }, this.SaveAll);
       //我这里Ctrl + D 是一个编辑功能
      const CtrlD = (val) =>
        ShortcuCtrls({ ...val, ShortcuKey: "D" }, this.EditNodeInfo);
        
      const CtrlC = (val) =>
        ShortcuCtrls({ ...val, ShortcuKey: "C" }, this.copyNode);
      const CtrlV = (val) =>
        ShortcuCtrls({ ...val, ShortcuKey: "V" }, this.pasteNode);
      const CtrlX = (val) =>
        ShortcuCtrls({ ...val, ShortcuKey: "X" }, this.shearNode);
      const Delete = (keyCode) => {
        if (keyCode === "DELETE") {
          this.deleteNode(this.CurrntNode || {}), CancelPreventDefault();
        }
      };
    },
        }

如何匹配用户按下键的操作？

CTRL + S 这是我 ctrl + s 的业务逻辑，你需要编写自己的业务逻辑。

         //保存全局的状态
              SaveAll(){
               try {
                if(this.SaveState)return
                // 每次保存调用一下子组件保存的方法
                this.$refs.nodeForm.save()
                this.SavePanel('保存成功')
                this.SaveState = true
               } catch (error) {
                
               }
              },
              
             async SavePanel(message){
              await axios.put(`/Process/${this.CurrentProcessPanel.id}`,{
              id:`${this.CurrentProcessPanel.id}`,
              name:this.CurrentProcessPanel.name,
              nodeList:this.data.nodeList,
              lineList:this.data.lineList
              })
              this.$message.success(message)
              // this.dataReloadB()
              // this.LoadPanelInfo(this.CurrentProcessPanel.id ,this.CurrentProcessPanel.name)
            },

CTRL + D

大致快捷键完成的效果

当然后续我还需要补上 ctrl + a 全选功能 ctrl + z 回退功能等等，期待和大家一起分享，期待你的Star 谢谢