48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { onMounted, onUnmounted } from 'vue'
|
|
import { useContextMenuStore } from '@/stores/contextMenu'
|
|
import type { MenuItem } from '@/stores/contextMenu'
|
|
|
|
/**
|
|
* 右键菜单Hook
|
|
*/
|
|
export function useContextMenu() {
|
|
const contextMenuStore = useContextMenuStore()
|
|
|
|
/**
|
|
* 显示右键菜单
|
|
*/
|
|
function showContextMenu(event: MouseEvent, menuItems: MenuItem[]) {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
contextMenuStore.showMenu(event, menuItems)
|
|
}
|
|
|
|
/**
|
|
* 点击外部区域关闭菜单
|
|
*/
|
|
function handleClickOutside(event: MouseEvent) {
|
|
if (contextMenuStore.show) {
|
|
const target = event.target as HTMLElement
|
|
if (!target.closest('.context-menu')) {
|
|
contextMenuStore.hideMenu()
|
|
}
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', handleClickOutside)
|
|
document.addEventListener('contextmenu', handleClickOutside)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', handleClickOutside)
|
|
document.removeEventListener('contextmenu', handleClickOutside)
|
|
})
|
|
|
|
return {
|
|
showContextMenu,
|
|
hideContextMenu: contextMenuStore.hideMenu,
|
|
}
|
|
}
|
|
|