更新侧边导航栏移动端显示为modal显示。

2026-02-04 13:42:27 +08:00 · 2022-03-07 14:21:27 +08:00
parent a424788c45
commit 6dab2ab35b
4 changed files with 196 additions and 147 deletions
--- a/.env.development
+++ b/.env.development
@@ -15,7 +15,7 @@ VITE_DROP_CONSOLE = true

 # 跨域代理，可以配置多个，请注意不要换行
 #VITE_PROXY = [["/appApi","http://localhost:8001"],["/upload","http://localhost:8001/upload"]]
-# VITE_PROXY=[["/api","https://naive-ui-admin"]]
+VITE_PROXY=[["/api","https://naive-ui-admin"]]

 # API 接口地址
 VITE_GLOB_API_URL =
--- a/src/layout/index.vue
+++ b/src/layout/index.vue
@@ -1,7 +1,7 @@
 <template>
  <n-layout class="layout" :position="fixedMenu" has-sider>
    <n-layout-sider
-      v-if="isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
+      v-if="!isMobile && isMixMenuNoneSub && (navMode === 'vertical' || navMode === 'horizontal-mix')"
      show-trigger="bar"
      @collapse="collapsed = true"
      :position="fixedMenu"
@@ -18,6 +18,16 @@
      <AsideMenu v-model:collapsed="collapsed" v-model:location="getMenuLocation" />
    </n-layout-sider>

+    <n-drawer
+      v-model:show="showSideDrawder"
+      :width="menuWidth"
+      :placement="'left'"
+      class="layout-side-drawer"
+    >
+      <Logo :collapsed="collapsed" />
+      <AsideMenu />
+    </n-drawer>
+
    <n-layout :inverted="inverted">
      <n-layout-header :inverted="getHeaderInverted" :position="fixedHeader">
        <PageHeader v-model:collapsed="collapsed" :inverted="inverted" />
@@ -57,170 +67,206 @@
 </template>

 <script lang="ts" setup>
-  import { ref, unref, computed, onMounted } from 'vue';
-  import { Logo } from './components/Logo';
-  import { TabsView } from './components/TagsView';
-  import { MainView } from './components/Main';
-  import { AsideMenu } from './components/Menu';
-  import { PageHeader } from './components/Header';
-  import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
-  import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
-  import { useLoadingBar } from 'naive-ui';
-  import { useRoute } from 'vue-router';
-  import { useProjectSettingStore } from '@/store/modules/projectSetting';
+import { ref, unref, computed, onMounted } from 'vue';
+import { Logo } from './components/Logo';
+import { TabsView } from './components/TagsView';
+import { MainView } from './components/Main';
+import { AsideMenu } from './components/Menu';
+import { PageHeader } from './components/Header';
+import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
+import { useDesignSetting } from '@/hooks/setting/useDesignSetting';
+import { useLoadingBar } from 'naive-ui';
+import { useRoute } from 'vue-router';
+import { useProjectSettingStore } from '@/store/modules/projectSetting';

-  const { getDarkTheme } = useDesignSetting();
-  const {
-    getShowFooter,
-    getNavMode,
-    getNavTheme,
-    getHeaderSetting,
-    getMenuSetting,
-    getMultiTabsSetting,
-  } = useProjectSetting();
+const { getDarkTheme } = useDesignSetting();
+const {
+  getShowFooter,
+  getNavMode,
+  getNavTheme,
+  getHeaderSetting,
+  getMenuSetting,
+  getMultiTabsSetting,
+} = useProjectSetting();

-  const settingStore = useProjectSettingStore();
+const settingStore = useProjectSettingStore();

-  const navMode = getNavMode;
+const navMode = getNavMode;

-  const collapsed = ref<boolean>(false);
+const collapsed = ref<boolean>(false);

-  const fixedHeader = computed(() => {
-    const { fixed } = unref(getHeaderSetting);
-    return fixed ? 'absolute' : 'static';
-  });
+const { mobileWidth, menuWidth } = unref(getMenuSetting);

-  const isMixMenuNoneSub = computed(() => {
-    const mixMenu = settingStore.menuSetting.mixMenu;
-    const currentRoute = useRoute();
-    if (unref(navMode) != 'horizontal-mix') return true;
-    if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
-      return false;
-    }
-    return true;
-  });
+const isMobile = ref<boolean>(false);

-  const fixedMenu = computed(() => {
-    const { fixed } = unref(getHeaderSetting);
-    return fixed ? 'absolute' : 'static';
-  });
+const fixedHeader = computed(() => {
+  const { fixed } = unref(getHeaderSetting);
+  return fixed ? 'absolute' : 'static';
+});

-  const isMultiTabs = computed(() => {
-    return unref(getMultiTabsSetting).show;
-  });
+const isMixMenuNoneSub = computed(() => {
+  const mixMenu = settingStore.menuSetting.mixMenu;
+  const currentRoute = useRoute();
+  if (unref(navMode) != 'horizontal-mix') return true;
+  if (unref(navMode) === 'horizontal-mix' && mixMenu && currentRoute.meta.isRoot) {
+    return false;
+  }
+  return true;
+});

-  const fixedMulti = computed(() => {
-    return unref(getMultiTabsSetting).fixed;
-  });
+const fixedMenu = computed(() => {
+  const { fixed } = unref(getHeaderSetting);
+  return fixed ? 'absolute' : 'static';
+});

-  const inverted = computed(() => {
-    return ['dark', 'header-dark'].includes(unref(getNavTheme));
-  });
+const isMultiTabs = computed(() => {
+  return unref(getMultiTabsSetting).show;
+});

-  const getHeaderInverted = computed(() => {
-    const navTheme = unref(getNavTheme);
-    return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
-  });
+const fixedMulti = computed(() => {
+  return unref(getMultiTabsSetting).fixed;
+});

-  const leftMenuWidth = computed(() => {
-    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-    return collapsed.value ? minMenuWidth : menuWidth;
-  });
+const inverted = computed(() => {
+  return ['dark', 'header-dark'].includes(unref(getNavTheme));
+});

-  const getChangeStyle = computed(() => {
-    const { minMenuWidth, menuWidth } = unref(getMenuSetting);
-    return {
-      'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
-    };
-  });
+const getHeaderInverted = computed(() => {
+  const navTheme = unref(getNavTheme);
+  return ['light', 'header-dark'].includes(navTheme) ? unref(inverted) : !unref(inverted);
+});

-  const getMenuLocation = computed(() => {
-    return 'left';
-  });
+const leftMenuWidth = computed(() => {
+  const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+  return collapsed.value ? minMenuWidth : menuWidth;
+});

-  const watchWidth = () => {
-    const Width = document.body.clientWidth;
-    if (Width <= 950) {
-      collapsed.value = true;
-    } else collapsed.value = false;
+const getChangeStyle = computed(() => {
+  const { minMenuWidth, menuWidth } = unref(getMenuSetting);
+  return {
+    'padding-left': collapsed.value ? `${minMenuWidth}px` : `${menuWidth}px`,
  };
+});

-  onMounted(() => {
-    window.addEventListener('resize', watchWidth);
-    //挂载在 window 方便与在js中使用
-    window['$loading'] = useLoadingBar();
-    window['$loading'].finish();
-  });
+const getMenuLocation = computed(() => {
+  return 'left';
+});
+
+// 控制显示或隐藏移动端侧边栏
+const showSideDrawder = computed({
+  get: () => isMobile.value && collapsed.value,
+  set: (val) => (collapsed.value = val)
+});
+
+//判断是否触发移动端模式
+const checkMobileMode = () => {
+  if (document.body.clientWidth <= mobileWidth) {
+    isMobile.value = true;
+
+  } else {
+    isMobile.value = false;
+  }
+  collapsed.value = false;
+}
+
+const watchWidth = () => {
+  const Width = document.body.clientWidth;
+  if (Width <= 950) {
+    collapsed.value = true;
+  } else collapsed.value = false;
+
+  checkMobileMode();
+};
+
+onMounted(() => {
+  checkMobileMode();
+  window.addEventListener('resize', watchWidth);
+  //挂载在 window 方便与在js中使用
+  window['$loading'] = useLoadingBar();
+  window['$loading'].finish();
+});
 </script>

-<style lang="less" scoped>
-  .layout {
-    display: flex;
-    flex-direction: row;
-    flex: auto;
-
-    &-default-background {
-      background: #f5f7f9;
-    }
-
-    .layout-sider {
-      min-height: 100vh;
-      box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
-      position: relative;
-      z-index: 13;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .layout-sider-fix {
-      position: fixed;
-      top: 0;
-      left: 0;
-    }
-
-    .ant-layout {
-      overflow: hidden;
-    }
-
-    .layout-right-fix {
-      overflow-x: hidden;
-      padding-left: 200px;
-      min-height: 100vh;
-      transition: all 0.2s ease-in-out;
-    }
-
-    .layout-content {
-      flex: auto;
-      min-height: 100vh;
-    }
-
-    .n-layout-header.n-layout-header--absolute-positioned {
-      z-index: 11;
-    }
-
-    .n-layout-footer {
-      background: none;
-    }
-  }
-
-  .layout-content-main {
-    margin: 0 10px 10px;
+<style lang="less">
+.layout-side-drawer {
+  background-color: rgb(0, 20, 40);
+  .layout-sider {
+    min-height: 100vh;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
    position: relative;
-    padding-top: 64px;
-  }
-
-  .layout-content-main-fix {
-    padding-top: 64px;
-  }
-
-  .fluid-header {
-    padding-top: 0px;
-  }
-
-  .main-view-fix {
-    padding-top: 44px;
-  }
-
-  .noMultiTabs {
-    padding-top: 0;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
  }
+}
+</style>
+<style lang="less" scoped>
+.layout {
+  display: flex;
+  flex-direction: row;
+  flex: auto;
+
+  &-default-background {
+    background: #f5f7f9;
+  }
+
+  .layout-sider {
+    min-height: 100vh;
+    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+    position: relative;
+    z-index: 13;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .layout-sider-fix {
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  .ant-layout {
+    overflow: hidden;
+  }
+
+  .layout-right-fix {
+    overflow-x: hidden;
+    padding-left: 200px;
+    min-height: 100vh;
+    transition: all 0.2s ease-in-out;
+  }
+
+  .layout-content {
+    flex: auto;
+    min-height: 100vh;
+  }
+
+  .n-layout-header.n-layout-header--absolute-positioned {
+    z-index: 11;
+  }
+
+  .n-layout-footer {
+    background: none;
+  }
+}
+
+.layout-content-main {
+  margin: 0 10px 10px;
+  position: relative;
+  padding-top: 64px;
+}
+
+.layout-content-main-fix {
+  padding-top: 64px;
+}
+
+.fluid-header {
+  padding-top: 0px;
+}
+
+.main-view-fix {
+  padding-top: 44px;
+}
+
+.noMultiTabs {
+  padding-top: 0;
+}
 </style>
--- a/src/settings/projectSetting.ts
+++ b/src/settings/projectSetting.ts
@@ -33,6 +33,8 @@ const setting = {
    fixed: true,
    //分割菜单
    mixMenu: false,
+    //触发移动端侧边栏的宽度
+    mobileWidth: 800
  },
  //面包屑
  crumbsSetting: {
--- a/types/config.d.ts
+++ b/types/config.d.ts
@@ -33,6 +33,7 @@ export interface ImenuSetting {
  fixed: boolean;
  mixMenu: boolean;
  collapsed: boolean;
+  mobileWidth: number;
 }

 export interface IcrumbsSetting {