import type { Ref } from 'vue'; import { computed, unref, onMounted, nextTick, ref } from 'vue'; import LayoutTrigger from '/@/layouts/default/trigger/index.vue'; import { TriggerEnum } from '/@/enums/menuEnum'; import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; import { useDebounce } from '/@/hooks/core/useDebounce'; /** * Handle related operations of menu events */ export function useSiderEvent() { const initRef = ref(false); const brokenRef = ref(false); const collapseRef = ref(true); const { setMenuSetting, getCollapsed, getMiniWidthNumber } = useMenuSetting(); const getCollapsedWidth = computed(() => { return unref(brokenRef) ? 0 : unref(getMiniWidthNumber); }); function onCollapseChange(val: boolean) { if (initRef.value) { collapseRef.value = val; setMenuSetting({ collapsed: val }); } else { !unref(getCollapsed) && setMenuSetting({ collapsed: val }); } initRef.value = true; } function onBreakpointChange(broken: boolean) { brokenRef.value = broken; } return { getCollapsedWidth, onCollapseChange, onBreakpointChange }; } /** * Handle related operations of menu folding */ export function useTrigger(getIsMobile: Ref) { const { getTrigger, getSplit } = useMenuSetting(); const showTrigger = computed(() => { const trigger = unref(getTrigger); return ( trigger !== TriggerEnum.NONE && !unref(getIsMobile) && (trigger === TriggerEnum.FOOTER || unref(getSplit)) ); }); const getTriggerAttr = computed(() => { if (unref(showTrigger)) { return {}; } return { trigger: null, }; }); const getTriggerSlot = computed(() => { if (unref(showTrigger)) { return { trigger: () => , }; } return {}; }); return { getTriggerAttr, getTriggerSlot }; } /** * Handle menu drag and drop related operations * @param siderRef * @param dragBarRef */ export function useDragLine(siderRef: Ref, dragBarRef: Ref) { const { getMiniWidthNumber, getCollapsed, setMenuSetting } = useMenuSetting(); onMounted(() => { nextTick(() => { const [exec] = useDebounce(changeWrapWidth, 20); exec(); }); }); function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) { document.onmousemove = function (innerE) { let iT = (ele as any).left + (innerE.clientX - clientX); innerE = innerE || window.event; const maxT = 600; const minT = unref(getMiniWidthNumber); iT < 0 && (iT = 0); iT > maxT && (iT = maxT); iT < minT && (iT = minT); ele.style.left = wrap.style.width = iT + 'px'; return false; }; } // Drag and drop in the menu area-release the mouse function removeMouseup(ele: any) { const wrap = unref(siderRef).$el; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; const width = parseInt(wrap.style.width); const miniWidth = unref(getMiniWidthNumber); if (!unref(getCollapsed)) { width > miniWidth + 20 ? setMenuSetting({ menuWidth: width }) : setMenuSetting({ collapsed: true }); } else { width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width }); } ele.releaseCapture?.(); }; } function changeWrapWidth() { const ele = unref(dragBarRef)?.$el; if (!ele) { return; } const side = unref(siderRef); const wrap = (side || {}).$el; ele.onmousedown = (e: any) => { wrap.style.transition = 'unset'; const clientX = e?.clientX; ele.left = ele.offsetLeft; handleMouseMove(ele, wrap, clientX); removeMouseup(ele); ele.setCapture?.(); return false; }; } return {}; }