| 提交 | 用户 | age | ||
| ba068b | 1 | import type { Ref } from 'vue'; |
| V | 2 | |
| 3 | import { computed, unref, onMounted, nextTick, ref } from 'vue'; | |
| 27e50b | 4 | import LayoutTrigger from '/@/layouts/default/trigger/index.vue'; |
| ba068b | 5 | |
| V | 6 | import { TriggerEnum } from '/@/enums/menuEnum'; |
| 7 | ||
| 8 | import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; | |
| 9 | import { useDebounce } from '/@/hooks/core/useDebounce'; | |
| 10 | ||
| 11 | /** | |
| 12 | * Handle related operations of menu events | |
| 13 | */ | |
| 14 | export function useSiderEvent() { | |
| 15 | const initRef = ref(false); | |
| 16 | const brokenRef = ref(false); | |
| 17 | const collapseRef = ref(true); | |
| 18 | ||
| 0692b4 | 19 | const { setMenuSetting, getCollapsed, getMiniWidthNumber, getShowMenu } = useMenuSetting(); |
| ba068b | 20 | |
| V | 21 | const getCollapsedWidth = computed(() => { |
| 22 | return unref(brokenRef) ? 0 : unref(getMiniWidthNumber); | |
| 23 | }); | |
| 24 | ||
| 25 | function onCollapseChange(val: boolean) { | |
| 26 | if (initRef.value) { | |
| 27 | collapseRef.value = val; | |
| 28 | setMenuSetting({ collapsed: val }); | |
| 29 | } else { | |
| 30 | !unref(getCollapsed) && setMenuSetting({ collapsed: val }); | |
| 31 | } | |
| 32 | initRef.value = true; | |
| 33 | } | |
| 34 | ||
| 35 | function onBreakpointChange(broken: boolean) { | |
| 36 | brokenRef.value = broken; | |
| 37 | } | |
| 38 | ||
| 39 | function onSiderClick(e: ChangeEvent) { | |
| 40 | if (!e || !e.target || e.target.className !== 'basic-menu__content') return; | |
| 0692b4 | 41 | if (!unref(getCollapsed) || !unref(getShowMenu)) return; |
| ba068b | 42 | setMenuSetting({ collapsed: false }); |
| V | 43 | } |
| 44 | return { getCollapsedWidth, onCollapseChange, onBreakpointChange, onSiderClick }; | |
| 45 | } | |
| 46 | ||
| 47 | /** | |
| 48 | * Handle related operations of menu folding | |
| 49 | */ | |
| 50 | export function useTrigger() { | |
| 51 | const { getTrigger } = useMenuSetting(); | |
| 52 | ||
| 53 | const showTrigger = computed(() => { | |
| 54 | const trigger = unref(getTrigger); | |
| 55 | return trigger !== TriggerEnum.NONE && trigger === TriggerEnum.FOOTER; | |
| 56 | }); | |
| 57 | ||
| 58 | const getTriggerAttr = computed(() => { | |
| 59 | if (unref(showTrigger)) { | |
| 60 | return {}; | |
| 61 | } | |
| 62 | return { | |
| 63 | trigger: null, | |
| 64 | }; | |
| 65 | }); | |
| 66 | ||
| 67 | const getTriggerSlot = computed(() => { | |
| 68 | if (unref(showTrigger)) { | |
| 69 | return { | |
| 70 | trigger: () => <LayoutTrigger />, | |
| 71 | }; | |
| 72 | } | |
| 73 | return {}; | |
| 74 | }); | |
| 75 | ||
| 76 | return { getTriggerAttr, getTriggerSlot }; | |
| 77 | } | |
| 78 | ||
| 79 | /** | |
| 80 | * Handle menu drag and drop related operations | |
| 81 | * @param siderRef | |
| 82 | * @param dragBarRef | |
| 83 | */ | |
| 84 | export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) { | |
| cedba3 | 85 | const { getMiniWidthNumber, getCollapsed, setMenuSetting, getCanDrag } = useMenuSetting(); |
| ba068b | 86 | |
| V | 87 | const getDragBarStyle = computed(() => { |
| 88 | if (unref(getCollapsed)) { | |
| 89 | return { left: `${unref(getMiniWidthNumber)}px` }; | |
| 90 | } | |
| 91 | return {}; | |
| 92 | }); | |
| 93 | ||
| 94 | onMounted(() => { | |
| 95 | nextTick(() => { | |
| 96 | const [exec] = useDebounce(changeWrapWidth, 20); | |
| 97 | exec(); | |
| 98 | }); | |
| 99 | }); | |
| 100 | ||
| 101 | function renderDragLine() { | |
| 102 | return ( | |
| 103 | <div | |
| cedba3 | 104 | class={[`layout-sidebar__darg-bar`, { hide: !unref(getCanDrag) }]} |
| ba068b | 105 | style={unref(getDragBarStyle)} |
| V | 106 | ref={dragBarRef} |
| 107 | /> | |
| 108 | ); | |
| 109 | } | |
| 110 | ||
| 111 | function handleMouseMove(ele: HTMLElement, wrap: HTMLElement, clientX: number) { | |
| 112 | document.onmousemove = function (innerE) { | |
| 113 | let iT = (ele as any).left + (innerE.clientX - clientX); | |
| 114 | innerE = innerE || window.event; | |
| 115 | const maxT = 600; | |
| 116 | const minT = unref(getMiniWidthNumber); | |
| 117 | iT < 0 && (iT = 0); | |
| 118 | iT > maxT && (iT = maxT); | |
| 119 | iT < minT && (iT = minT); | |
| 120 | ele.style.left = wrap.style.width = iT + 'px'; | |
| 121 | return false; | |
| 122 | }; | |
| 123 | } | |
| 124 | ||
| 125 | // Drag and drop in the menu area-release the mouse | |
| 126 | function removeMouseup(ele: any) { | |
| 127 | const wrap = unref(siderRef).$el; | |
| 128 | document.onmouseup = function () { | |
| 129 | document.onmousemove = null; | |
| 130 | document.onmouseup = null; | |
| 131 | const width = parseInt(wrap.style.width); | |
| 132 | const miniWidth = unref(getMiniWidthNumber); | |
| 133 | ||
| 134 | if (!unref(getCollapsed)) { | |
| 135 | width > miniWidth + 20 | |
| 136 | ? setMenuSetting({ menuWidth: width }) | |
| 137 | : setMenuSetting({ collapsed: true }); | |
| 138 | } else { | |
| 139 | width > miniWidth && setMenuSetting({ collapsed: false, menuWidth: width }); | |
| 140 | } | |
| 141 | ele.releaseCapture?.(); | |
| 142 | }; | |
| 143 | } | |
| 144 | ||
| 145 | function changeWrapWidth() { | |
| 146 | const ele = unref(dragBarRef) as any; | |
| 147 | const side = unref(siderRef); | |
| 148 | ||
| 149 | const wrap = (side || {}).$el; | |
| 150 | ele && | |
| 151 | (ele.onmousedown = (e: any) => { | |
| 152 | wrap.style.transition = 'unset'; | |
| 153 | const clientX = e?.clientX; | |
| 154 | ele.left = ele.offsetLeft; | |
| 155 | handleMouseMove(ele, wrap, clientX); | |
| 156 | removeMouseup(ele); | |
| 157 | ele.setCapture?.(); | |
| 158 | return false; | |
| 159 | }); | |
| 160 | } | |
| 161 | ||
| 162 | return { renderDragLine }; | |
| 163 | } | |
