easyCode低代码-快捷键

一个低代码平台快捷键功能是必不可少的，下面介绍一下easycode低代码的快捷键实现，项目总介绍：基于Vue3的低代码开发平台EasyCode - 掘金 (juejin.cn)

介绍：

主体分为快捷键配置、快捷键解析、快捷键执行

快捷键配置

"alt e"：需要执行的快捷键

label：快捷键简单描述

func：快捷键执行的方法

const keyDowns = {
  "alt e": {
    label: '设置组件',
    func: function () {
      setterComponent()
    }
  },
  "alt t": {
    label: '向上选择组件',
    func: function () {
      upSelectComponent()
    }
  },
  "ctrl c":{
    label:"复制",
    func:function(){
      copy()
    }
  },
  "ctrl x":{
    label:"剪切",
    func:function(){
      shear()
    }
  },
  "ctrl v":{
    label:"粘贴",
    func:function(){
      stickup()
    }
  },
  "ctrl m":{
    label: '调整margin',
    func: function () {
      CommonStatusStore().editMargin = !CommonStatusStore().editMargin
      CommonStatusStore().editPosition = false
    }
  },
  "ctrl p":{
    label: '调整position',
    func: function () {
      CommonStatusStore().editPosition = !CommonStatusStore().editPosition
      CommonStatusStore().editMargin = false
    }
  },
  "ctrl d":{
    label: '删除',
    func: function () {
      deleteSelectComponent()
    }
  },
  "Backspace":{
    label: '删除',
    func: function () {
      deleteSelectComponent()
    }
  },
  "ctrl l":{
    label: '锁定组件',
    func: function (){
      lockComponent()
    }
  },
  "ctrl s":{
    label: '保存',
    global:true,
    func: function(){
      savePage()
    }
  },
  "ctrl z":{
    label: '撤销',
    func: function (){
      undo()
    }
  },
  "ctrl y":{
    label: '回退',
    func: function (){
      redo()
    }
  },
}

解析快捷键

在监听事件中传入的ctrlKey、altKey、shiftKey为boolean，在keyDowns中是字符串，所以需要根据是否为true进行判断一下，进行字符串的拼接

// 解析快捷键
function analysisKey(e) {
  return `${e.ctrlKey?'ctrl ':''}${e.altKey?'alt ':''}${e.shiftKey?'shift ':''}${e.key.toLowerCase()?e.key:''}`;
}

快捷键执行

根据analysisKey解析后的快捷键字符串值，通过key的形式在keyDowns中找到对应的func并进行执行，

export function initShortKeyDown() {
  if (keyDowns) {
    window.onkeydown = (e)=>{
        const nowKey = analysisKey(e)
        if(keyDowns.hasOwnProperty(nowKey)){
          if(!keyDowns[nowKey].global){
              // 对快捷键操作进行拦截，否则在文本输入框的位置会有执行快捷键的错误
            if(e.target.localName === "textarea" || e.target.localName === "input") return
          }
          e.preventDefault()
          keyDowns[nowKey].func()
        }
    }
  } else {
    throw new Error('无快捷键')
  }
}