组件易用性优化,所有组件打开后支持ESC关闭
This commit is contained in:
parent
5fbe526e2e
commit
dffe6bb85c
|
@ -1,5 +1,5 @@
|
||||||
import useRouterStore, { type RouteStr } from '@/useRouterStore'
|
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 { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||||||
import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
|
import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
|
||||||
import asyncLoader from './utils/asyncLoader'
|
import asyncLoader from './utils/asyncLoader'
|
||||||
|
@ -24,12 +24,25 @@ export default defineComponent(() => {
|
||||||
watch(router, () => {
|
watch(router, () => {
|
||||||
full.value = false
|
full.value = false
|
||||||
})
|
})
|
||||||
|
onMounted(() => {
|
||||||
|
window.addEventListener('keydown', handleKeydown)
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
// 清理事件监听
|
||||||
|
window.removeEventListener('keydown', handleKeydown)
|
||||||
|
})
|
||||||
|
function handleKeydown(e: any) {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
router.back()
|
||||||
|
}
|
||||||
|
}
|
||||||
return () => (
|
return () => (
|
||||||
<div
|
<div
|
||||||
class="fixed left-0 top-0 z-50 w-full"
|
class="fixed left-0 top-0 z-50 w-full"
|
||||||
onContextmenu={(e) => e.stopPropagation()}
|
onContextmenu={(e) => e.stopPropagation()}
|
||||||
onKeydown={(e) => e.stopPropagation()}
|
onKeydown={(e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{/* 背景遮罩 */}
|
{/* 背景遮罩 */}
|
||||||
<Transition>
|
<Transition>
|
||||||
|
@ -93,8 +106,7 @@ export default defineComponent(() => {
|
||||||
<AdderPage />
|
<AdderPage />
|
||||||
) : router.path === 'global-background' ? (
|
) : router.path === 'global-background' ? (
|
||||||
<BackgroundSwtich />
|
<BackgroundSwtich />
|
||||||
) :
|
) : router.path.startsWith('widget-') ? (
|
||||||
router.path.startsWith('widget-') ? (
|
|
||||||
(() => {
|
(() => {
|
||||||
const name = router.path.split('-')[1]
|
const name = router.path.split('-')[1]
|
||||||
const selected = widgetList.find((el) => el.name === name)
|
const selected = widgetList.find((el) => el.name === name)
|
||||||
|
|
Loading…
Reference in New Issue