mirror of
https://github.com/kevin-DL/build-gmail-clone-with-vue-3.git
synced 2026-01-11 18:54:31 +00:00
Abstract to useKeydown composition API
This commit is contained in:
@@ -8,21 +8,11 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { onBeforeUnmount } from 'vue';
|
||||
import { useKeydown } from '../composition/useKeydown';
|
||||
|
||||
export default {
|
||||
setup({closeModal}){
|
||||
let onKeydown = (event) => {
|
||||
if(event.key == 'Escape') {
|
||||
closeModal()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onKeydown)
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener('keydown', onKeydown)
|
||||
})
|
||||
useKeydown({key: 'Escape', fn: closeModal})
|
||||
},
|
||||
props: {
|
||||
closeModal: {
|
||||
|
||||
17
src/composition/useKeydown.js
Normal file
17
src/composition/useKeydown.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { onBeforeUnmount } from 'vue';
|
||||
|
||||
export const useKeydown = function(keyCombo) {
|
||||
let onkey = function(event) {
|
||||
if(keyCombo.key == event.key) {
|
||||
keyCombo.fn()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', onkey);
|
||||
|
||||
onBeforeUnmount(()=> {
|
||||
window.removeEventListener('keydown', onkey);
|
||||
})
|
||||
}
|
||||
|
||||
export default useKeydown;
|
||||
Reference in New Issue
Block a user