perf: keyshortcut directive
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
gitea/salix-front/pipeline/pr-dev This commit looks good
Details
This commit is contained in:
parent
f3042b0326
commit
89cdd466b1
|
@ -1,5 +1,5 @@
|
||||||
export default {
|
export default {
|
||||||
mounted: function (el, binding) {
|
mounted(el, binding) {
|
||||||
const shortcut = binding.value ?? '+';
|
const shortcut = binding.value ?? '+';
|
||||||
|
|
||||||
const { key, ctrl, alt, callback } =
|
const { key, ctrl, alt, callback } =
|
||||||
|
@ -8,25 +8,24 @@ export default {
|
||||||
key: shortcut,
|
key: shortcut,
|
||||||
ctrl: true,
|
ctrl: true,
|
||||||
alt: true,
|
alt: true,
|
||||||
callback: () =>
|
callback: () => el.click(),
|
||||||
document
|
|
||||||
.querySelector(`button[shortcut="${shortcut}"]`)
|
|
||||||
?.click(),
|
|
||||||
}
|
}
|
||||||
: binding.value;
|
: binding.value;
|
||||||
|
|
||||||
|
if (!el.hasAttribute('shortcut')) {
|
||||||
|
el.setAttribute('shortcut', key);
|
||||||
|
}
|
||||||
|
|
||||||
const handleKeydown = (event) => {
|
const handleKeydown = (event) => {
|
||||||
if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) {
|
if (event.key === key && (!ctrl || event.ctrlKey) && (!alt || event.altKey)) {
|
||||||
callback();
|
callback();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// Attach the event listener to the window
|
|
||||||
window.addEventListener('keydown', handleKeydown);
|
window.addEventListener('keydown', handleKeydown);
|
||||||
|
|
||||||
el._handleKeydown = handleKeydown;
|
el._handleKeydown = handleKeydown;
|
||||||
},
|
},
|
||||||
unmounted: function (el) {
|
unmounted(el) {
|
||||||
if (el._handleKeydown) {
|
if (el._handleKeydown) {
|
||||||
window.removeEventListener('keydown', el._handleKeydown);
|
window.removeEventListener('keydown', el._handleKeydown);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue