| 提交 | 用户 | age | ||
| 2f6253 | 1 | import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue'; |
| 陈 | 2 | |
| 3 | import { Layout } from 'ant-design-vue'; | |
| 4 | import SideBarTrigger from './SideBarTrigger'; | |
| 5 | import { menuStore } from '/@/store/modules/menu'; | |
| 6 | ||
| 7 | import darkMiniIMg from '/@/assets/images/sidebar/dark-mini.png'; | |
| 8 | import lightMiniImg from '/@/assets/images/sidebar/light-mini.png'; | |
| 9 | import darkImg from '/@/assets/images/sidebar/dark.png'; | |
| 10 | import lightImg from '/@/assets/images/sidebar/light.png'; | |
| 11 | import { appStore } from '/@/store/modules/app'; | |
| 12 | import { MenuModeEnum, MenuSplitTyeEnum, MenuThemeEnum } from '/@/enums/menuEnum'; | |
| 13 | import { useDebounce } from '/@/hooks/core/useDebounce'; | |
| 14 | import LayoutMenu from './LayoutMenu'; | |
| 15 | export default defineComponent({ | |
| 16 | name: 'DefaultLayoutSideBar', | |
| 17 | setup() { | |
| 18 | const initRef = ref(false); | |
| 19 | const brokenRef = ref(false); | |
| 20 | const collapseRef = ref(true); | |
| 21 | const dragBarRef = ref<Nullable<HTMLDivElement>>(null); | |
| 22 | const sideRef = ref<any>(null); | |
| 23 | ||
| 24 | const getProjectConfigRef = computed(() => { | |
| 25 | return appStore.getProjectConfig; | |
| 26 | }); | |
| 27 | ||
| 28 | // 根据展开状态设置背景图片 | |
| 29 | const getStyle = computed((): any => { | |
| 30 | const collapse = unref(collapseRef); | |
| 31 | ||
| 32 | const theme = unref(getProjectConfigRef).menuSetting.theme; | |
| 33 | let bg = ''; | |
| 34 | if (theme === MenuThemeEnum.DARK) { | |
| 35 | bg = collapse ? darkMiniIMg : darkImg; | |
| 36 | } | |
| 37 | if (theme === MenuThemeEnum.LIGHT) { | |
| 38 | bg = collapse ? lightMiniImg : lightImg; | |
| 39 | } | |
| 40 | return { | |
| 41 | 'background-image': `url(${bg})`, | |
| 42 | }; | |
| 43 | }); | |
| 44 | ||
| 45 | function onCollapseChange(val: boolean) { | |
| 46 | if (initRef.value) { | |
| 47 | collapseRef.value = val; | |
| 48 | menuStore.commitCollapsedState(val); | |
| 49 | } else { | |
| 50 | const collapsed = appStore.getProjectConfig.menuSetting.collapsed; | |
| 51 | !collapsed && menuStore.commitCollapsedState(val); | |
| 52 | } | |
| 53 | initRef.value = true; | |
| 54 | } | |
| 55 | ||
| 56 | // 菜单区域拖拽 - 鼠标移动 | |
| 57 | function handleMouseMove(ele: any, wrap: any, clientX: number) { | |
| 58 | document.onmousemove = function (innerE) { | |
| 59 | let iT = ele.left + ((innerE || event).clientX - clientX); | |
| 60 | innerE = innerE || window.event; | |
| 61 | // let tarnameb = innerE.target || innerE.srcElement; | |
| 62 | const maxT = 600; | |
| 63 | const minT = 80; | |
| 64 | iT < 0 && (iT = 0); | |
| 65 | iT > maxT && (iT = maxT); | |
| 66 | iT < minT && (iT = minT); | |
| 67 | ele.style.left = wrap.style.width = iT + 'px'; | |
| 68 | return false; | |
| 69 | }; | |
| 70 | } | |
| 71 | ||
| 72 | // 菜单区域拖拽 - 鼠标松开 | |
| 73 | function removeMouseup(ele: any) { | |
| 74 | const wrap = unref(sideRef).$el; | |
| 75 | document.onmouseup = function () { | |
| 76 | document.onmousemove = null; | |
| 77 | document.onmouseup = null; | |
| 78 | const width = parseInt(wrap.style.width); | |
| 79 | menuStore.commitDragStartState(false); | |
| 80 | if (!menuStore.getCollapsedState) { | |
| 81 | if (width > 100) { | |
| 82 | setMenuWidth(width); | |
| 83 | } else { | |
| 84 | menuStore.commitCollapsedState(true); | |
| 85 | } | |
| 86 | } else { | |
| 87 | if (width > 80) { | |
| 88 | setMenuWidth(width); | |
| 89 | menuStore.commitCollapsedState(false); | |
| 90 | } | |
| 91 | } | |
| 92 | ||
| 93 | ele.releaseCapture && ele.releaseCapture(); | |
| 94 | }; | |
| 95 | } | |
| 96 | ||
| 97 | function setMenuWidth(width: number) { | |
| 98 | appStore.commitProjectConfigState({ | |
| 99 | menuSetting: { | |
| 100 | menuWidth: width, | |
| 101 | }, | |
| 102 | }); | |
| 103 | } | |
| 104 | ||
| 105 | function changeWrapWidth() { | |
| 106 | const ele = unref(dragBarRef) as any; | |
| 107 | const side = unref(sideRef); | |
| 108 | ||
| 109 | const wrap = (side || {}).$el; | |
| 110 | // const eleWidth = 6; | |
| 111 | ele && | |
| 112 | (ele.onmousedown = (e: any) => { | |
| 113 | menuStore.commitDragStartState(true); | |
| 114 | wrap.style.transition = 'unset'; | |
| 115 | const clientX = (e || event).clientX; | |
| 116 | ele.left = ele.offsetLeft; | |
| 117 | handleMouseMove(ele, wrap, clientX); | |
| 118 | removeMouseup(ele); | |
| 119 | ele.setCapture && ele.setCapture(); | |
| 120 | return false; | |
| 121 | }); | |
| 122 | } | |
| 123 | function handleBreakpoint(broken: boolean) { | |
| 124 | brokenRef.value = broken; | |
| 125 | } | |
| 126 | ||
| 127 | onMounted(() => { | |
| 128 | nextTick(() => { | |
| 129 | const [exec] = useDebounce(changeWrapWidth, 20); | |
| 130 | exec(); | |
| 131 | }); | |
| 132 | }); | |
| 133 | ||
| 134 | const getDragBarStyle = computed(() => { | |
| 135 | if (menuStore.getCollapsedState) { | |
| 136 | return { left: '80px' }; | |
| 137 | } | |
| 138 | return {}; | |
| 139 | }); | |
| 140 | ||
| 141 | const getCollapsedWidth = computed(() => { | |
| 142 | return unref(brokenRef) ? 0 : 80; | |
| 143 | }); | |
| 144 | ||
| 145 | function renderDragLine() { | |
| 146 | const { menuSetting: { hasDrag = true } = {} } = unref(getProjectConfigRef); | |
| 147 | return ( | |
| 148 | <div | |
| 149 | class={[`layout-sidebar__dargbar`, !hasDrag ? 'hide' : '']} | |
| 150 | style={unref(getDragBarStyle)} | |
| 151 | ref={dragBarRef} | |
| 152 | /> | |
| 153 | ); | |
| 154 | } | |
| 155 | ||
| 156 | return () => { | |
| 157 | const { | |
| 158 | menuSetting: { theme, split: splitMenu }, | |
| 159 | } = unref(getProjectConfigRef); | |
| 160 | const { getCollapsedState, getMenuWidthState } = menuStore; | |
| 161 | ||
| 162 | return ( | |
| 163 | <Layout.Sider | |
| 164 | onCollapse={onCollapseChange} | |
| 165 | breakpoint="md" | |
| 166 | width={getMenuWidthState} | |
| 167 | collapsed={getCollapsedState} | |
| 168 | collapsible | |
| 169 | collapsedWidth={unref(getCollapsedWidth)} | |
| 170 | theme={theme} | |
| 171 | class="layout-sidebar" | |
| 172 | ref={sideRef} | |
| 173 | onBreakpoint={handleBreakpoint} | |
| 174 | style={unref(getStyle)} | |
| 175 | > | |
| 176 | {{ | |
| 177 | trigger: () => <SideBarTrigger />, | |
| 178 | default: () => ( | |
| 179 | <> | |
| 180 | <LayoutMenu | |
| 181 | theme={theme} | |
| 182 | menuMode={splitMenu ? MenuModeEnum.INLINE : null} | |
| 183 | splitType={splitMenu ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE} | |
| 184 | /> | |
| 185 | {renderDragLine()} | |
| 186 | </> | |
| 187 | ), | |
| 188 | }} | |
| 189 | </Layout.Sider> | |
| 190 | ); | |
| 191 | }; | |
| 192 | }, | |
| 193 | }); | |
