diff --git a/src/GlobalModal.tsx b/src/GlobalModal.tsx index 42010f5..0486150 100644 --- a/src/GlobalModal.tsx +++ b/src/GlobalModal.tsx @@ -1,5 +1,5 @@ import useRouterStore, { type RouteStr } from '@/useRouterStore' -import { computed, defineComponent, ref, Transition, watch } from 'vue' +import { computed, defineComponent, onMounted, onUnmounted, ref, Transition, watch } from 'vue' import { OhVueIcon, addIcons } from 'oh-vue-icons' import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons' import asyncLoader from './utils/asyncLoader' @@ -18,18 +18,31 @@ export default defineComponent(() => { router.path.startsWith('widget-') || router.path === 'global-search' || router.path === 'global-adder' || - router.path === 'global-background' + router.path === 'global-background' ) const full = ref(false) watch(router, () => { full.value = false }) - + onMounted(() => { + window.addEventListener('keydown', handleKeydown) + }) + onUnmounted(() => { + // 清理事件监听 + window.removeEventListener('keydown', handleKeydown) + }) + function handleKeydown(e: any) { + if (e.key === 'Escape') { + router.back() + } + } return () => (
e.stopPropagation()} - onKeydown={(e) => e.stopPropagation()} + onKeydown={(e) => { + e.stopPropagation() + }} > {/* 背景遮罩 */} @@ -43,7 +56,7 @@ export default defineComponent(() => { )} {/* 弹框主体 */} - + {show.value && (
{ ) : router.path === 'global-background' ? ( - ) : - router.path.startsWith('widget-') ? ( - (() => { - const name = router.path.split('-')[1] - const selected = widgetList.find((el) => el.name === name) - if (!selected) - return ( -
- 组件维护中 -
- ) - const compo = selected.modal - return - })() - ) : null} + ) : router.path.startsWith('widget-') ? ( + (() => { + const name = router.path.split('-')[1] + const selected = widgetList.find((el) => el.name === name) + if (!selected) + return ( +
+ 组件维护中 +
+ ) + const compo = selected.modal + return + })() + ) : null}