Skip to content

Instantly share code, notes, and snippets.

@Elandlord
Created September 17, 2021 09:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Elandlord/add53ca70ff09baef442d54bf3674774 to your computer and use it in GitHub Desktop.
Save Elandlord/add53ca70ff09baef442d54bf3674774 to your computer and use it in GitHub Desktop.
Vue 3 use-keydown composable (Composition API)
import {onBeforeUnmount} from "vue";
let useKeyDown = (keyCombos) => {
let onKeyDown = (event) => {
let kc = keyCombos.find(kc => kc.key === event.key);
if(kc) {
kc.fn();
}
}
window.addEventListener('keydown', onKeyDown);
onBeforeUnmount(() => {
window.removeEventListener('keydown', onKeyDown);
});
};
export default useKeyDown;
// example usage in another Vue component
import useKeyDown from 'from-file-location-somewhere.js';
export default {
setup(props, {emit}) {
useKeyDown([
{'key': 'Escape', 'fn': () => { emit('closeModal') }}, // Emits 'closeModal' event on Escape button
]);
return {
emit
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment