最近开发热键功能，有所感悟。
从产品的角度思考，希望客户可以操作简单一点，通过上下左右方向键可以聚焦不同的元素，方便用户操作。
从技术的角度思考

• 问题1 键盘事件的监听
• 问题2 这个是一个全局的行为
• 问题3 我需要找到当前聚焦元素距离上 下 左 右最近的元素，并且聚焦。

首先问题1

因为键盘原生的左右是用来调整input 聚焦位置的，所以优先考虑组合件比如option+上。
github上找到mousetrap 键盘快捷键库。

问题2

全局行为的话，可以在main.ts里面注册。可以实现一个hooks。

问题3

这个也是最重要的。
逻辑: 触发键盘按钮找到所有的可以聚焦的元素，算出每个元素距离上 左的距离。拿到当前聚焦的元素。如果是左右键 直接在所有可以聚焦的list里面找到当前聚焦的元素，左键就是他的上一个，右键就是他的下一个。上下键的逻辑比较复杂，如果是上 ，需要找到距离聚焦元素最近的所有元素，如果只有一个直接聚焦，如果是多个，继续判断left，距离最近的所有元素每个元素的left - 聚焦元素的left取绝对值。取到最小值的下标，选中这个下标对应el元素即可。下也同理。只是判断的是 bottom 而已。
代码如下

import Mousetrap from "mousetrap";
import "@/utils/mousetrap/index";

type EleArr = {
  el: HTMLElement;
  top: number;
  left: number;
};

const useHotKeys = async () => {
  let eleArr: EleArr[] = [];

  function setEleArr() {
    eleArr = [];
    let dom = document.body.classList.contains("el-popup-parent--hidden")
      ? Array.from(document.body.querySelectorAll("#app>.el-overlay")).at(-1)
      : document.querySelector(".el-main");
    if (!dom) {
      return;
    }
    const focusableElements = dom.querySelectorAll("a[href], input, select, textarea");
    focusableElements.forEach(element => {
      const rect = element.getBoundingClientRect();
      if (rect.top || rect.left) {
        eleArr.push({
          el: element as HTMLElement,
          top: rect.top + window.scrollY + (element.classList.contains("el-select__input") ? -7 : 0),
          left: rect.left + window.scrollX
        });
      }
    });
  }

  function getFocusedEle() {
    return document.activeElement as HTMLElement;
  }

  function operateKeys(type) {
    if (!eleArr.length) {
      return;
    }
    const el = getFocusedEle();
    if (el) {
      const eleIndex = eleArr.map(item => item.el).indexOf(el);
      let activeEle = eleArr.at(eleIndex);
      switch (type) {
        case "left":
          eleArr.at(eleIndex - 1)!.el.focus();
          break;
        case "right":
          let index = eleIndex + 1 >= eleArr.length ? 0 : eleIndex + 1;
          eleArr.at(index)!.el.focus();
          break;
        case "up":
          if (activeEle) {
            // 先找到在上它上面的所有元素
            const underList = eleArr.filter(item => item.top < activeEle!.top);
            if (underList.length) {
              let mapTop = underList.map(item => item.top);
              let maxTopItem = underList[mapTop.indexOf(Math.max(...mapTop))];
              const recentlyEleList = eleArr.filter(item => item.top == maxTopItem!.top);
              if (recentlyEleList.length == 1) {
                recentlyEleList[0].el.focus();
                break;
              }
              const numList = recentlyEleList.map(item => {
                return Math.abs(item.left - activeEle!.left);
              });
              const minIndex = numList.indexOf(Math.min(...numList));
              if (minIndex != -1) {
                recentlyEleList[minIndex].el.focus();
              }
            }
          }
          break;
        case "down":
          if (activeEle) {
            // 先找到在它下面的所有元素
            const underList = eleArr.filter(item => item.top > activeEle!.top);
            if (underList.length) {
              const recentlyEleList = eleArr.filter(item => item.top == underList.at(0)!.top);
              if (recentlyEleList.length == 1) {
                recentlyEleList[0].el.focus();
                break;
              }
              const numList = recentlyEleList.map(item => {
                return Math.abs(item.left - activeEle!.left);
              });
              const minIndex = numList.indexOf(Math.min(...numList));
              if (minIndex != -1) {
                recentlyEleList[minIndex].el.focus();
              }
            }
          }
          break;
        default:
          console.warn("无效的指令");
          break;
      }
      // let elLeft = el.getBoundingClientRect().left + window.scrollX;
      // let elTop = el.getBoundingClientRect().top + window.scrollX;
    } else {
      if (eleArr.length) {
        eleArr[0].el.focus();
      }
    }
  }

  const toNext = () => {
    setEleArr();
    operateKeys("down");
  };

  const toPrev = () => {
    setEleArr();
    operateKeys("up");
  };

  const toLeft = () => {
    setEleArr();
    operateKeys("left");
  };

  const toRight = () => {
    setEleArr();
    console.log(eleArr);
    operateKeys("right");
  };

  return { toNext, toPrev, toLeft, toRight };
};

// 添加键盘事件
export const addKeyBoard = async () => {
  const { toLeft, toRight, toNext, toPrev } = await useHotKeys();
  Mousetrap.bindGlobal("option+up", () => {
    toPrev();
    return false;
  });
  Mousetrap.bindGlobal("option+down", () => {
    toNext();
    return false;
  });
  Mousetrap.bindGlobal("option+left", () => {
    toLeft();
    return false;
  });
  Mousetrap.bindGlobal("option+right", () => {
    toRight();
    return false;
  });
};

以上js在main.ts 里面引入addKeyBoard方法调用即可
解释

因为还有弹框所以判断了

let dom = document.body.classList.contains("el-popup-parent--hidden")
      ? Array.from(document.body.querySelectorAll("#app>.el-overlay")).at(-1)
      : document.querySelector(".el-main");

因为mousetrap在input里面实现键盘事件，需要安装插件。可以在官网找到。

import Mousetrap from "mousetrap";
import "@/utils/mousetrap/index";


// @/utils/mousetrap/index  内容
(function (a) {
  let c = {},
    d = a.prototype.stopCallback;
  a.prototype.stopCallback = function (e, b, a, f) {
    return this.paused ? !0 : c[a] || c[f] ? !1 : d.call(this, e, b, a);
  };
  a.prototype.bindGlobal = function (a, b, d) {
    this.bind(a, b, d);
    if (a instanceof Array) for (b = 0; b < a.length; b++) c[a[b]] = !0;
    else c[a] = !0;
  };
  a.init();
})(Mousetrap);