From e1872b5dca04c01cdc054e2ab18a3f2e9aaf4eb7 Mon Sep 17 00:00:00 2001 From: lanyuanxiaoyao Date: Wed, 11 Dec 2024 14:27:38 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E8=8F=9C=E5=8D=95=E4=BA=A4?= =?UTF-8?q?=E4=BA=92=E4=BD=93=E9=AA=8C=EF=BC=8C=E6=B7=BB=E5=8A=A0=E9=94=AE?= =?UTF-8?q?=E7=9B=98=E5=AF=BC=E8=88=AA=E6=94=AF=E6=8C=81=E5=92=8C=E8=BF=87?= =?UTF-8?q?=E6=B8=A1=E6=95=88=E6=9E=9C=EF=BC=8C=E4=BC=98=E5=8C=96=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=92=8C=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E9=80=BB?= =?UTF-8?q?=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.vue | 207 ++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 145 insertions(+), 62 deletions(-) diff --git a/src/App.vue b/src/App.vue index 904af2b..d7cf926 100644 --- a/src/App.vue +++ b/src/App.vue @@ -51,29 +51,80 @@ const showContextMenu = (data) => { handleSelect(item) // 显示菜单 showMenu.value = true - listFrozen.value = true // 冻结列表 + listFrozen.value = true // 冻结列表 } // 修改关闭菜单的处理 const closeMenu = () => { showMenu.value = false - listFrozen.value = false // 解冻列表 + listFrozen.value = false + selectedMenuIndex.value = -1 // 重置菜单选中项 +} + +// 添加当前选中的菜单项索引 +const selectedMenuIndex = ref(-1) + +// 修改键盘事件处理函数 +const handleKeyDown = (e) => { + if (e.key === 'ArrowRight' && !showMenu.value && selectedItem.value) { + e.preventDefault() + handleMenuTriggerClick(e) + } else if (e.key === 'ArrowLeft' && showMenu.value) { + e.preventDefault() + showMenu.value = false + listFrozen.value = false + selectedMenuIndex.value = -1 // 重置菜单选中项 + } else if (e.key === 'Escape') { + // ESC 键只在菜单打开时响应 + if (showMenu.value) { + e.preventDefault() + closeMenu() + } + } else if (showMenu.value) { + switch (e.key) { + case 'ArrowUp': + e.preventDefault() + selectedMenuIndex.value = + selectedMenuIndex.value <= 0 + ? menuItems.length - 1 + : selectedMenuIndex.value - 1 + break + case 'ArrowDown': + e.preventDefault() + selectedMenuIndex.value = + selectedMenuIndex.value >= menuItems.length - 1 + ? 0 + : selectedMenuIndex.value + 1 + break + case 'Enter': + e.preventDefault() + if (selectedMenuIndex.value >= 0) { + handleMenuClick(menuItems[selectedMenuIndex.value]) + selectedMenuIndex.value = -1 // 重置菜单选中项 + } + break + } + } } onMounted(() => { // 添加全局点击事件来关闭菜单 document.addEventListener('click', closeMenu) + // 添加键盘事件监听 + document.addEventListener('keydown', handleKeyDown) }) onBeforeUnmount(() => { document.removeEventListener('click', closeMenu) + // 移除键盘事件监听 + document.removeEventListener('keydown', handleKeyDown) }) -// 修改菜单点击处理 +// 修改菜单击处理 const handleMenuClick = (item) => { console.log('Menu clicked:', item) showMenu.value = false - listFrozen.value = false // 解冻列表 + listFrozen.value = false // 解冻列表 } // 修改菜单触发器点击处理 @@ -82,26 +133,37 @@ const handleMenuTriggerClick = (e) => { // 切换菜单显示状态 if (showMenu.value) { showMenu.value = false - listFrozen.value = false // 解冻列表 + listFrozen.value = false // 解冻列表 } else { - // 如果���有选中项，选中第一个可见项 + // 如果有选中项，选中第一个可见项 if (listData.length > 0) { // 如果已有选中项就保持当前选中，否则选中第一项 const itemToSelect = selectedItem.value || listData[0] showContextMenu({ item: itemToSelect }) } else { showMenu.value = true - listFrozen.value = true // 冻结列表 + listFrozen.value = true // 冻结列表 } } } + +// 添加过渡钩子函数 +const onBeforeLeave = (el) => { + // 确保元素在离开过渡开始时可见 + el.style.display = 'block' +} + +const onAfterLeave = (el) => { + // 过渡结束后重置样式 + el.style.display = '' +}