use-menu.ts 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748
  1. import type { SubMenuProvider } from '../interface';
  2. import { computed, getCurrentInstance } from 'vue';
  3. import { findComponentUpward } from '../utils';
  4. function useMenu() {
  5. const instance = getCurrentInstance();
  6. if (!instance) {
  7. throw new Error('instance is required');
  8. }
  9. /**
  10. * @zh_CN 获取所有父级菜单链路
  11. */
  12. const parentPaths = computed(() => {
  13. let parent = instance.parent;
  14. const paths: string[] = [instance.props.path as string];
  15. while (parent?.type.name !== 'Menu') {
  16. if (parent?.props.path) {
  17. paths.unshift(parent.props.path as string);
  18. }
  19. parent = parent?.parent ?? null;
  20. }
  21. return paths;
  22. });
  23. const parentMenu = computed(() => {
  24. return findComponentUpward(instance, ['Menu', 'SubMenu']);
  25. });
  26. return {
  27. parentMenu,
  28. parentPaths,
  29. };
  30. }
  31. function useMenuStyle(menu?: SubMenuProvider) {
  32. const subMenuStyle = computed(() => {
  33. return {
  34. '--menu-level': menu ? (menu?.level ?? 0 + 1) : 0,
  35. };
  36. });
  37. return subMenuStyle;
  38. }
  39. export { useMenu, useMenuStyle };