From ebbd788fbb2c0b45d4473798efc57eec8ba74a25 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期二, 18 六月 2024 14:51:16 +0800
Subject: [PATCH] 版本更新至2.11.5
---
src/layouts/default/sider/LayoutSider.vue | 183 ++++++++++++++++++++-------------------------
1 files changed, 83 insertions(+), 100 deletions(-)
diff --git a/src/layouts/default/sider/LayoutSider.vue b/src/layouts/default/sider/LayoutSider.vue
index 960ca69..9678746 100644
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -1,135 +1,118 @@
<template>
<div
v-if="getMenuFixed && !getIsMobile"
- :style="getHiddenDomStyle"
v-show="showClassSideBarRef"
+ :style="getHiddenDomStyle"
></div>
- <Sider
+ <!--
+ 閽堝鍦烘櫙锛氳彍鍗曟姌鍙犳寜閽负鈥滃簳閮ㄢ�濇椂锛�
+ 鍏充簬 breakpoint锛�
+ 缁勪欢瀹氫箟鐨勬槸 lg: '992px'锛�
+ 鑰� vben 瀹氫箟鐨勬槸 lg: '960px'锛�
+ 鐜版妸缁勪欢鐨� breakpoint 璁句负 md锛�
+ 鍒欑粍浠剁殑 md: '768px' < vben鐨� lg: '960px'锛�
+ 闃叉 collapsedWidth 鍦� 960px ~ 992px 涔嬮棿閿欒璁剧疆涓� 0锛�
+ 浠庤�岄槻姝㈠嚭鐜版诞鍔ㄧ殑 trigger锛堜笖breakpoint浜嬩欢澶辨晥锛�
+ -->
+ <Layout.Sider
v-show="showClassSideBarRef"
ref="sideRef"
- breakpoint="lg"
+ :breakpoint="getTrigger === TriggerEnum.FOOTER ? 'md' : 'lg'"
collapsible
:class="getSiderClass"
:width="getMenuWidth"
:collapsed="getCollapsed"
:collapsedWidth="getCollapsedWidth"
:theme="getMenuTheme"
- @breakpoint="onBreakpointChange"
- :trigger="getTrigger"
+ :trigger="triggerVNode"
v-bind="getTriggerAttr"
+ @breakpoint="onBreakpointChange"
>
- <template #trigger v-if="getShowTrigger">
+ <template v-if="getShowTrigger" #trigger>
<LayoutTrigger />
</template>
<LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
<DragBar ref="dragBarRef" />
- </Sider>
+ </Layout.Sider>
</template>
-<script lang="ts">
- import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';
-
+<script lang="ts" setup>
import { Layout } from 'ant-design-vue';
+ import { computed, CSSProperties, h, ref, unref } from 'vue';
+
+ import { MenuModeEnum, MenuSplitTyeEnum, TriggerEnum } from '@/enums/menuEnum';
+ import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
+ import { useAppInject } from '@/hooks/web/useAppInject';
+ import { useDesign } from '@/hooks/web/useDesign';
+ import LayoutTrigger from '@/layouts/default/trigger/index.vue';
+
import LayoutMenu from '../menu/index.vue';
- import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
-
- import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
-
- import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
- import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
- import { useAppInject } from '/@/hooks/web/useAppInject';
- import { useDesign } from '/@/hooks/web/useDesign';
-
import DragBar from './DragBar.vue';
- export default defineComponent({
- name: 'LayoutSideBar',
- components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
- setup() {
- const dragBarRef = ref(null);
- const sideRef = ref(null);
+ import { useDragLine, useSiderEvent, useTrigger } from './useLayoutSider';
- const {
- getCollapsed,
- getMenuWidth,
- getSplit,
- getMenuTheme,
- getRealWidth,
- getMenuHidden,
- getMenuFixed,
- getIsMixMode,
- toggleCollapsed,
- } = useMenuSetting();
+ defineOptions({ name: 'LayoutSideBar' });
- const { prefixCls } = useDesign('layout-sideBar');
+ const dragBarRef = ref(null);
+ const sideRef = ref(null);
- const { getIsMobile } = useAppInject();
+ const {
+ getCollapsed,
+ getMenuWidth,
+ getSplit,
+ getMenuTheme,
+ getRealWidth,
+ getMenuHidden,
+ getMenuFixed,
+ getIsMixMode,
+ getTrigger,
+ } = useMenuSetting();
- const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
+ const { prefixCls } = useDesign('layout-sideBar');
- useDragLine(sideRef, dragBarRef);
+ const { getIsMobile } = useAppInject();
- const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
+ const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
- const getMode = computed(() => {
- return unref(getSplit) ? MenuModeEnum.INLINE : null;
- });
+ useDragLine(sideRef, dragBarRef);
- const getSplitType = computed(() => {
- return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
- });
+ const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
- const showClassSideBarRef = computed(() => {
- return unref(getSplit) ? !unref(getMenuHidden) : true;
- });
-
- const getSiderClass = computed(() => {
- return [
- prefixCls,
- {
- [`${prefixCls}--fixed`]: unref(getMenuFixed),
- [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
- },
- ];
- });
-
- const getHiddenDomStyle = computed((): CSSProperties => {
- const width = `${unref(getRealWidth)}px`;
- return {
- width: width,
- overflow: 'hidden',
- flex: `0 0 ${width}`,
- maxWidth: width,
- minWidth: width,
- transition: 'all 0.2s',
- };
- });
-
- // 鍦ㄦ澶勪娇鐢ㄨ绠楅噺鍙兘浼氬鑷磗ider寮傚父
- // andv 鏇存柊鍚庯紝濡傛灉trigger鎻掓Ы鍙敤锛屽垯姝ゅ浠ｇ爜鍙簾寮�
- const getTrigger = h(LayoutTrigger);
-
- return {
- prefixCls,
- sideRef,
- dragBarRef,
- getIsMobile,
- getHiddenDomStyle,
- getSiderClass,
- getTrigger,
- getTriggerAttr,
- getCollapsedWidth,
- getMenuFixed,
- showClassSideBarRef,
- getMenuWidth,
- getCollapsed,
- getMenuTheme,
- onBreakpointChange,
- getMode,
- getSplitType,
- getShowTrigger,
- toggleCollapsed,
- };
- },
+ const getMode = computed(() => {
+ return unref(getSplit) ? MenuModeEnum.INLINE : null;
});
+
+ const getSplitType = computed(() => {
+ return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
+ });
+
+ const showClassSideBarRef = computed(() => {
+ return unref(getSplit) ? !unref(getMenuHidden) : true;
+ });
+
+ const getSiderClass = computed(() => {
+ return [
+ prefixCls,
+ {
+ [`${prefixCls}--fixed`]: unref(getMenuFixed),
+ [`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
+ },
+ ];
+ });
+
+ const getHiddenDomStyle = computed((): CSSProperties => {
+ const width = `${unref(getRealWidth)}px`;
+ return {
+ width,
+ overflow: 'hidden',
+ flex: `0 0 ${width}`,
+ maxWidth: width,
+ minWidth: width,
+ transition: 'all 0.2s',
+ };
+ });
+
+ // 鍦ㄦ澶勪娇鐢ㄨ绠楅噺鍙兘浼氬鑷磗ider寮傚父
+ // andv 鏇存柊鍚庯紝濡傛灉trigger鎻掓Ы鍙敤锛屽垯姝ゅ浠ｇ爜鍙簾寮�
+ const triggerVNode = h(LayoutTrigger);
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-sideBar';
@@ -138,7 +121,7 @@
z-index: @layout-sider-fixed-z-index;
&--fixed {
- position: fixed;
+ position: fixed !important;
top: 0;
left: 0;
height: 100%;
--
Gitblit v1.9.3