123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- 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<boolean>) {
- 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: () => <LayoutTrigger />,
- };
- }
- return {};
- });
- return { getTriggerAttr, getTriggerSlot };
- }
- /**
- * Handle menu drag and drop related operations
- * @param siderRef
- * @param dragBarRef
- */
- export function useDragLine(siderRef: Ref<any>, dragBarRef: Ref<any>) {
- 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 {};
- }
|