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 = '' +}