最近開發(fā)熱鍵功能，有所感悟登舞。
從產(chǎn)品的角度思考，希望客戶可以操作簡單一點悬荣，通過上下左右方向鍵可以聚焦不同的元素菠秒，方便用戶操作。
從技術(shù)的角度思考
- 問題1 鍵盤事件的監(jiān)聽
- 問題2 這個是一個全局的行為
- 問題3 我需要找到當(dāng)前聚焦元素距離上 下 左 右最近的元素氯迂，并且聚焦践叠。
首先問題1
因為鍵盤原生的左右是用來調(diào)整input 聚焦位置的，所以優(yōu)先考慮組合件比如option+上嚼蚀。
github上找到mousetrap 鍵盤快捷鍵庫禁灼。
問題2
全局行為的話，可以在main.ts里面注冊轿曙∨叮可以實現(xiàn)一個hooks。
問題3
這個也是最重要的拳芙。
邏輯: 觸發(fā)鍵盤按鈕找到所有的可以聚焦的元素察藐，算出每個元素距離上 左的距離。拿到當(dāng)前聚焦的元素舟扎。如果是左右鍵 直接在所有可以聚焦的list里面找到當(dāng)前聚焦的元素分飞，左鍵就是他的上一個，右鍵就是他的下一個睹限。上下鍵的邏輯比較復(fù)雜譬猫，如果是上 ，需要找到距離聚焦元素最近的所有元素羡疗，如果只有一個直接聚焦染服，如果是多個，繼續(xù)判斷l(xiāng)eft叨恨，距離最近的所有元素每個元素的left - 聚焦元素的left取絕對值柳刮。取到最小值的下標(biāo)，選中這個下標(biāo)對應(yīng)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方法調(diào)用即可
解釋
因為還有彈框所以判斷了
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里面實現(xiàn)鍵盤事件送矩，需要安裝插件蚕甥。可以在官網(wǎng)找到栋荸。
import Mousetrap from "mousetrap";
import "@/utils/mousetrap/index";
// @/utils/mousetrap/index 內(nèi)容
(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);
