index.ts 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  1. import { shallowRef, computed } from 'vue'
  2. import { useMenu } from '@/hooks/menu'
  3. import { ActionMenu, ActionMenuOptions } from './interface'
  4. export function useActionMenu<T>(options: ActionMenuOptions = {}) {
  5. const { authCode, preventDefault = true, queryFn } = options
  6. const { componentMap, getAuthButtons } = useMenu(authCode)
  7. // 当前激活的菜单
  8. const activeMenu = shallowRef<Partial<ActionMenu<T>>>({})
  9. // 当前打开的组件
  10. const asyncComponent = computed(() => {
  11. const { name = '' } = activeMenu.value
  12. return componentMap.get(name)
  13. })
  14. // 打开组件
  15. const openComponent = (e: ActionMenu<T>) => {
  16. if (preventDefault) {
  17. e.disabled = true
  18. }
  19. activeMenu.value = e
  20. }
  21. // 关闭组件
  22. const closeComponent = (refresh: boolean) => {
  23. const name = activeMenu.value.name
  24. if (preventDefault) {
  25. activeMenu.value.disabled = false
  26. }
  27. activeMenu.value = {}
  28. refresh && queryFn && queryFn(name)
  29. }
  30. return {
  31. componentMap,
  32. asyncComponent,
  33. activeMenu,
  34. getAuthButtons,
  35. openComponent,
  36. closeComponent,
  37. }
  38. }