useLayoutSider.tsx 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. import type { Ref } from 'vue';
  2. import { computed, unref, onMounted, nextTick, ref } from 'vue';
  3. import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
  4. import { TriggerEnum } from '/@/enums/menuEnum';
  5. import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  6. import { useDebounce } from '/@/hooks/core/useDebounce';
  7. /**
  8. * Handle related operations of menu events
  9. */
  10. export function useSiderEvent() {
  11. const initRef = ref(false);
  12. const brokenRef = ref(false);
  13. const collapseRef = ref(true);
  14. const { setMenuSetting, getCollapsed, getMiniWidthNumber } = useMenuSetting();
  15. const getCollapsedWidth = computed(() => {
  16. return unref(brokenRef) ? 0 : unref(getMiniWidthNumber);
  17. });
  18. function onCollapseChange(val: boolean) {
  19. if (initRef.value) {
  20. collapseRef.value = val;
  21. setMenuSetting({ collapsed: val });
  22. } else {
  23. !unref(getCollapsed) && setMenuSetting({ collapsed: val });
  24. }
  25. initRef.value = true;
  26. }
  27. function onBreakpointChange(broken: boolean) {
  28. brokenRef.value = broken;
  29. }
  30. return { getCollapsedWidth, onCollapseChange, onBreakpointChange };
  31. }
  32. /**
  33. * Handle related operations of menu folding
  34. */
  35. export function useTrigger(getIsMobile: Ref<boolean>) {
  36. const { getTrigger, getSplit } = useMenuSetting();
  37. const showTrigger = computed(() => {
  38. const trigger = unref(getTrigger);
  39. return (
  40. trigger !== TriggerEnum.NONE &&
  41. !unref(getIsMobile) &&
  42. (trigger === TriggerEnum.FOOTER || unref(getSplit))
  43. );
  44. });
  45. const getTriggerAttr = computed(() => {
  46. if (unref(showTrigger)) {
  47. return {};
  48. }
  49. return {
  50. trigger: null,
  51. };
  52. });
  53. const getTriggerSlot = computed(() => {
  54. if (unref(showTrigger)) {
  55. return {
  56. trigger: () => <LayoutTrigger />,
  57. };
  58. }
  59. return {};
  60. });
  61. return { getTriggerAttr, getTriggerSlot };
  62. }
  63. /**
  64. * Handle menu drag and drop related operations
  65. * @param siderRef
  66. * @param dragBarRef
  67. */
  68. export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
  69. const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting();
  70. onMounted(() => {
  71. nextTick(() => {
  72. const [exec] = useDebounce(changeWrapWidth, 20);
  73. exec();
  74. });
  75. });
  76. function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) {
  77. document.onmousemove = function (innerE) {
  78. let iT = (ele as any).left + (innerE.clientX - clientX);
  79. innerE = innerE || window.event;
  80. const maxT = 600;
  81. const minT = unref(getMiniWidthNumber);
  82. iT < 0 && (iT = 0);
  83. iT > maxT && (iT = maxT);
  84. iT < minT && (iT = minT);
  85. ele.style.left = wrap.style.width = iT + 'px';
  86. return false;
  87. };
  88. }
  89. // Drag and drop in the menu area-release the mouse
  90. function removeMouseup(ele: any) {
  91. const wrap = unref(siderRef).$el;
  92. document.onmouseup = function () {
  93. document.onmousemove = null;
  94. document.onmouseup = null;
  95. const width = parseInt(wrap.style.width);
  96. const miniWidth = unref(getMiniWidthNumber);
  97. if (!unref(getCollapsed)) {
  98. width > miniWidth + 20
  99. ? setMenuSetting({ menuWidth: width })
  100. : setMenuSetting({ collapsed: true });
  101. } else {
  102. width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width });
  103. }
  104. ele.releaseCapture?.();
  105. };
  106. }
  107. function changeWrapWidth() {
  108. const ele = unref(dragBarRef)?.$el;
  109. if (!ele) {
  110. return;
  111. }
  112. const side = unref(siderRef);
  113. const wrap = (side || {}).$el;
  114. ele.onmousedown = (e: any) => {
  115. wrap.style.transition = 'unset';
  116. const clientX = e?.clientX;
  117. ele.left = ele.offsetLeft;
  118. handleMouseMove(ele, wrap, clientX);
  119. removeMouseup(ele);
  120. ele.setCapture?.();
  121. return false;
  122. };
  123. }
  124. return {};
  125. }