feat: add ESC key support to close all modals and fullscreen modes
This commit is contained in:
@@ -5,7 +5,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ref, watch, onUnmounted } from 'vue'
|
||||
import { Plug, Plus, X } from 'lucide-vue-next'
|
||||
|
||||
const props = defineProps({
|
||||
@@ -13,6 +13,24 @@ const props = defineProps({
|
||||
})
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
const handleKeydown = (e) => {
|
||||
if (e.key === 'Escape' && showModal.value) {
|
||||
showModal.value = false
|
||||
}
|
||||
}
|
||||
|
||||
watch(showModal, (isOpen) => {
|
||||
if (isOpen) {
|
||||
window.addEventListener('keydown', handleKeydown)
|
||||
} else {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('keydown', handleKeydown)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
Reference in New Issue
Block a user