父组件
    父组件设置相对定位，我的组件设置绝对定位，通过v-bind绑定left偏移量，因为侧边栏会伸缩收回，用watch监听这个变量。

    1. <!--
    2.  * @Author: zhangy
    3.  * @Date: 2022-06-22 21:16:54
    4.  * @LastEditors: zzd993
    5.  * @LastEditTime: 2022-08-01 17:10:27
    6.  * @FilePath: \elabnote-front-main\src\layout\index.vue
    7.  * Copyright (c) 2022 by BMY, All Rights Reserved.
    8. -->
    9. <template>
    10.   <div class="main-layout-root">
    11.     <a-layout v-if="isLayout" class="layout-main">
    12.       <a-layout-sider
    13.         :collapsed-width="50"
    14.         :default-collapsed="collapsed"
    15.         :collapsed="collapsed"
    16.         collapsible
    17.         class="layout-sider"
    18.       >
    19.         <Menu :collapsed="collapsed" />
    20.         <template #trigger>
    21.           <a-space direction="vertical" :size="8">
    22.             <a-badge @click="handleMessages" :count="userInfo.unreadCount" dot :offset="[2, -2]">
    23.               <IconNotification :style="{ fontSize: '18px', verticalAlign: '-3px' }" />
    24.             </a-badge>
    25.             <a-avatar @click="showInfo" :size="28" :style="{ background: randomColor }">{{
    26.               userInfo.userNameEn
    27.             }}</a-avatar>
    28.             <div @click="collapsed = !collapsed">
    29.               <IconCaretRight v-if="collapsed" />
    30.               <IconCaretLeft v-else />
    31.             </div>
    32.           </a-space>
    33.         </template>
    34.       </a-layout-sider>
    35.       <a-layout v-if="false">
    36.         <a-layout>
    37.           <a-layout-content>
    38.             <router-view v-slot="{ Component }">
    39.               <keep-alive>
    40.                 <component :is="Component" />
    41.               </keep-alive>
    42.             </router-view>
    43.           </a-layout-content>
    44.         </a-layout>
    45.       </a-layout>
    46.       <a-layout class="mian-layout-content" ref="MainLayoutContentRef">
    47.         <a-layout-sider
    48.           :collapsible="false"
    49.           :collapsed="isTagViewCollapsed"
    50.           :collapsed-width="260"
    51.           :width="width"
    52.           style="height: 100%; z-index: 2"
    53.           @collapse="
    54.             () => {
    55.               isTagViewCollapsed = !isTagViewCollapsed
    56.             }
    57.           "
    58.         >
    59.           <router-view v-slot="{ Component }">
    60.             <keep-alive>
    61.               <component :is="Component" />
    62.             </keep-alive>
    63.           </router-view>
    64.         </a-layout-sider>
    65.         <a-layout-content class="tag-view-wrapper">
    66.           <!-- <a-ffix :offset-top="0" style="background-color: #f4f5f7"> -->
    67.           <TagView style="background-color: #f4f5f7" />
    68.           <!-- </a-ffix> -->
    69.           <div class="tag-view-detial">
    70.             <TagViewDetial />
    71.           </div>
    72.         </a-layout-content>
    73.       </a-layout>
    74.     </a-layout>
    75.     <router-view v-else v-slot="{ Component }">
    76.       <keep-alive>
    77.         <component :is="Component" />
    78.       </keep-alive>
    79.     </router-view>
    80.     <!-- 我的组件 -->
    81.     <div class="userInfo">
    82.       <person-menu :userInfo="userInfo" v-show="show" />
    83.     </div>
    84.   </div>
    85. </template>
    86. <script lang="ts" setup>
    87.   import { IconCaretRight, IconCaretLeft } from '@arco-design/web-vue/es/icon'
    88.   import { ref, watch } from 'vue'
    89.   import { getRandomColor } from '@/util'
    90.   import { useRoute, useRouter } from 'vue-router'
    91.   // import { localCache } from '@/util'
    92.   import { useUserStore, useTagViewStore } from '@/store'
    93.   import { storeToRefs } from 'pinia'
    94.   import Menu from './menu/index.vue'
    95.   import TagView from './tag-view/index.vue'
    96.   import TagViewDetial from '@/views/tag-view-detial/index.vue'
    97.   import { useElementSize } from '@vueuse/core'
    98.   import PersonMenu from './person-menu/index.vue'
    99.   // 控制信息隐藏显示
    100.   let show = ref(false)
    101.   const showInfo = () => {
    102.     show.value = !show.value
    103.   }
    105.   const isShowTagView = ref<'none' | 'block'>('none')
    107.   const MainLayoutContentRef = ref(null)
    109.   const { width } = useElementSize(MainLayoutContentRef)
    111.   const { userInfo } = storeToRefs(useUserStore())
    112.   // console.log(userInfo)
    114.   const { isCollapsed } = storeToRefs(useTagViewStore())
    116.   const randomColor = getRandomColor()
    117.   const collapsed = ref(true)
    118.   const collapsedWidth = ref<string>('60px')
    119.   // const popupVisible = ref(false)
    121.   const route = useRoute()
    122.   const router = useRouter()
    124.   const isLayout = ref(true)
    125.   const isTagView = ref(false)
    127.   const isTagViewCollapsed = ref(true)
    129.   // const handleLogout = async () => {
    130.   //   popupVisible.value = false
    131.   //   await router.replace('/login')
    132.   //   localCache.clearCache()
    133.   //   location.reload()
    134.   // }
    136.   const handleMessages = async () => {
    137.     if (route.path === '/main/vue-app') {
    138.       location.hash = '#/message/messageManagement'
    139.     } else {
    140.       await router.replace('/main/vue-app')
    141.       location.hash = '#/message/messageManagement'
    142.     }
    143.   }
    145.   // const handlePersonInfo = async () => {
    146.   //   if (route.path === '/main/vue-app') {
    147.   //     location.hash = '#/settings/tips/info'
    148.   //   } else {
    149.   //     await router.replace('/main/vue-app')
    150.   //     location.hash = '#/settings/tips/info'
    151.   //   }
    152.   //   popupVisible.value = false
    153.   // }
    155.   watch(
    156.     () => route.path,
    157.     () => {
    158.       isLayout.value = route?.meta?.isLayout === false ? false : true
    159.       isTagView.value = Boolean(route?.meta?.isTagView)
    160.       if (!isTagView.value) {
    161.         isTagViewCollapsed.value = false
    162.         isShowTagView.value = 'none'
    163.       } else {
    164.         isTagViewCollapsed.value = isCollapsed.value
    165.         isShowTagView.value = 'block'
    166.       }
    167.     },
    168.     {
    169.       immediate: true
    170.     }
    171.   )
    173.   watch(
    174.     isCollapsed,
    175.     () => {
    176.       if (!isTagView.value) {
    177.         isTagViewCollapsed.value = false
    178.       } else {
    179.         isTagViewCollapsed.value = isCollapsed.value
    180.       }
    181.     },
    182.     {
    183.       immediate: true
    184.     }
    185.   )
    187.   /**
    188.    * 监听菜单的展开或合并
    189.    */
    190.   watch(collapsed, (newCollapsed) => {
    191.     newCollapsed ? (collapsedWidth.value = '60px') : (collapsedWidth.value = '210px')
    192.   })
    193. </script>
    194. <style scoped lang="scss">
    195.   .main-layout-root {
    196.     position: relative;
    197.     height: 100%;
    198.     .userInfo {
    199.       position: absolute;
    200.       z-index: 100;
    201.       left: v-bind(collapsedWidth);
    202.       bottom: 60px;
    203.     }
    204.   }
    205.   .layout-main {
    206.     height: 100%;
    207.     background: var(--color-fill-2);
    208.     .layout-sider {
    209.       position: relative;
    210.       background-color: $themeColor;
    211.       :deep(.arco-layout-sider-children) {
    212.         height: 95% !important;
    213.         .arco-menu-inner {
    214.           overflow: hidden;
    215.         }
    216.       }
    217.       :deep(.arco-layout-sider) {
    218.         z-index: 1009;
    219.         display: flex;
    220.         flex-direction: column;
    221.       }
    222.     }
    223.   }
    224.   .layout-main :deep(.arco-layout-sider) .logo {
    225.     height: 32px;
    226.     margin: 8px 0;
    227.     background: $themeColor;
    228.   }
    229.   .layout-main :deep(.arco-layout-sider-light) .logo {
    230.     background: $themeColor;
    231.   }
    232.   .layout-main :deep(.arco-layout-header) {
    233.     height: 64px;
    234.     line-height: 64px;
    235.     background: var(--color-bg-3);
    236.   }
    237.   .layout-main .layout-sider :deep(.arco-layout-footer) {
    238.     height: 48px;
    239.     color: var(--color-text-2);
    240.     font-weight: 400;
    241.     font-size: 14px;
    242.     line-height: 48px;
    243.   }
    244.   .layout-main :deep(.arco-layout-content) {
    245.     color: var(--color-text-2);
    246.     font-weight: 400;
    247.     font-size: 14px;
    248.     background: var(--color-bg-3);
    249.   }
    250.   .layout-main .layout-sider :deep(.arco-layout-footer),
    251.   .layout-main .layout-sider :deep(.arco-layout-sider-trigger),
    252.   .layout-main .layout-sider :deep(.arco-layout-sider-trigger-light) {
    253.     // height: 15%;
    254.     flex: 1;
    255.     background-color: $themeColor;
    256.     border: none;
    257.     color: $themeMenuFrontColor;
    258.     // layout footer 文字居中
    259.     text-align: center;
    260.   }
    261.   .layout-main .layout-sider :deep(.arco-menu-selected):hover {
    262.     background-color: $themeMenuHoverColor;
    263.   }
    264.   .layout-main .layout-sider :deep(.arco-menu-inline-header):hover {
    265.     background-color: $themeMenuHoverColor !important;
    266.   }
    267.   .layout-main .layout-sider :deep(.arco-menu-item):hover {
    268.     display: flex;
    269.     background-color: $themeMenuHoverColor !important;
    270.   }
    271.   .layout-main .layout-sider :deep(.arco-menu-item) {
    272.     display: flex;
    273.     background-color: $themeColor !important;
    274.     color: $themeMenuFrontColor !important;
    275.   }
    276.   .layout-main .layout-sider :deep(.arco-menu-inline-header) {
    277.     background-color: $themeColor !important;
    278.     display: flex;
    279.     height: 40px;
    280.   }
    281.   .layout-main .layout-sider :deep(.arco-menu-selected) {
    282.     background-color: $themeMenuHoverColor !important;
    283.     color: $themeMenuFrontActiveColor !important;
    284.     display: flex;
    285.     height: 40px;
    286.   }
    288.   .mian-layout-content {
    289.     position: relative;
    290.     :deep(.arco-layout-sider) {
    291.       position: absolute;
    292.     }
    293.     :deep(.arco-layout-content) {
    294.       // @todo
    295.       margin-left: 260px;
    296.       // display: v-bind(isShowTagView) !important;
    297.     }
    298.     :deep(.arco-layout-sider-has-trigger) {
    299.       padding-bottom: 0;
    300.     }
    302.     :deep(.tag-view-wrapper) {
    303.       height: 100%;
    304.       display: flex;
    305.       flex-direction: column;
    306.       overflow-y: scroll;
    308.       .tag-view-detial {
    309.         height: calc(100vh - 38px);
    310.         overflow-y: scroll;
    311.         flex: 1;
    312.         display: flex;
    313.         flex-direction: column;
    314.       }
    315.     }
    316.   }
    317. </style>

    子组件：

    1. <!--
    2.  * @Author: zzd993
    3.  * @Date: 2022-07-29 15:00:35
    4.  * @LastEditors: zzd993
    5.  * @LastEditTime: 2022-08-01 17:54:48
    6.  * @FilePath: \elabnote-front-main\src\layout\person-menu\index.vue
    7.  * Copyright (c) 2022 by BMY, All Rights Reserved.
    8. -->
    9. <template>
    10.   <div class="person-menu">
    11.     <div class="person-box">
    12.       <a-avatar
    13.         :size="40"
    14.         :style="{ background: randomColor }"
    15.         style="margin-left: 16px; margin-right: 16px; border: 1px solid #fff"
    16.       >
    17.         {{ props.userInfo.userNameEn }}</a-avatar
    18.       >
    19.       <div class="person-info">
    20.         <span>{{ getGreetings() }} {{ props.userInfo.userNameEn }}</span>
    21.         <span>{{ props.userInfo.roleNames }} | {{ props.userInfo.levelTwoOrganizationName }}</span>
    22.       </div>
    23.     </div>
    24.     <a-menu mode="pop" theme="light" class="arco-menu">
    25.       <template v-for="menu in menus" :key="menu.id">
    26.         <a-menu-item v-if="!menu.children" class="arco-menu-item">
    27.           <SvgIcon :icon-size="24" :icon-name="menu.iconName" style="margin-right: 8px" />{{ menu.content }}
    28.         </a-menu-item>
    29.         <a-sub-menu v-else class="arco-sub-menu">
    30.           <template #title>
    31.             <SvgIcon :icon-size="24" :icon-name="menu.iconName" style="margin-right: 8px" />{{ menu.content }}
    32.           </template>
    33.           <a-menu-item v-for="subMenu in menu.children" :key="subMenu.id" class="arco-menu-item">
    34.             <SvgIcon :icon-size="24" :icon-name="subMenu.iconName" style="margin-right: 8px" />{{ subMenu.content }}
    35.           </a-menu-item>
    36.         </a-sub-menu>
    37.       </template>
    38.     </a-menu>
    39.   </div>
    40. </template>
    42. <script setup lang="ts">
    43.   import { getRandomColor } from '@/util'
    44.   // import { localCache } from '@/util'
    45.   import SvgIcon from '@/components/SvgIcon/index.vue'
    46.   // import { useRoute, useRouter } from 'vue-router'
    47.   // 菜单列表
    48.   const menus = [
    49.     {
    50.       id: '1',
    51.       iconName: 'modelset',
    52.       content: '模块设置',
    53.       children: [
    54.         {
    55.           id: '6',
    56.           iconName: 'kuwei',
    57.           content: '库位设置'
    58.         },
    59.         {
    60.           id: '7',
    61.           iconName: 'template',
    62.           content: '模板设置'
    63.         },
    64.         {
    65.           id: '8',
    66.           iconName: 'zhuce',
    67.           content: '注册设置'
    68.         }
    69.       ]
    70.     },
    71.     {
    72.       id: '2',
    73.       iconName: 'shenpi',
    74.       content: '审批设置'
    75.     },
    76.     {
    77.       id: '3',
    78.       iconName: 'manage',
    79.       content: '管理后台'
    80.     },
    81.     {
    82.       id: '4',
    83.       iconName: 'account',
    84.       content: '账号设置'
    85.     },
    86.     {
    87.       id: '5',
    88.       iconName: 'sign-out',
    89.       content: '退出登录'
    90.     }
    91.   ]
    92.   const randomColor = getRandomColor()
    93.   const props = defineProps<{ userInfo: any }>()
    94.   // console.log(props.userInfo)
    96.   // const route = useRoute()
    97.   // const router = useRouter()
    99.   // const popupVisible = ref(false)
    101.   // const handlePersonInfo = async () => {
    102.   //   if (route.path === '/main/vue-app') {
    103.   //     location.hash = '#/settings/tips/info'
    104.   //   } else {
    105.   //     await router.replace('/main/vue-app')
    106.   //     location.hash = '#/settings/tips/info'
    107.   //   }
    108.   //   popupVisible.value = false
    109.   // }
    111.   // const handleLogout = async () => {
    112.   //   popupVisible.value = false
    113.   //   await router.replace('/login')
    114.   //   localCache.clearCache()
    115.   //   location.reload()
    116.   // }
    117.   // 问候语
    118.   const getGreetings = () => {
    119.     let greeting = ''
    120.     let now = new Date(),
    121.       hour = now.getHours()
    122.     if (hour < 6) {
    123.       greeting = '凌晨好'
    124.     } else if (hour < 9) {
    125.       greeting = '早上好'
    126.     } else if (hour < 12) {
    127.       greeting = '上午好'
    128.     } else if (hour < 14) {
    129.       greeting = '中午好'
    130.     } else if (hour < 17) {
    131.       greeting = '下午好'
    132.     } else if (hour < 19) {
    133.       greeting = '傍晚好'
    134.     } else if (hour < 22) {
    135.       greeting = '晚上好'
    136.     }
    137.     return greeting
    138.   }
    139. </script>
    141. <style scoped lang="scss">
    142.   .person-menu {
    143.     z-index: 99;
    144.     border-radius: 6px;
    145.     /* .arco-menu-item {
    147.     } */
    148.     .person-box {
    149.       width: 260px;
    150.       height: 76px;
    151.       display: flex;
    152.       background-image: url('../../assets/images/userInfo.png');
    153.       /* justify-content: center; */
    154.       align-items: center;
    155.       .person-info {
    156.         display: flex;
    157.         flex-direction: column;
    158.         span:first-child {
    159.           font-weight: 700;
    160.           font-size: 14px;
    161.           line-height: 22px;
    163.           color: #fff;
    164.         }
    165.         span:nth-child(2) {
    166.           font-size: 12px;
    167.           line-height: 22px;
    168.           color: #c2cdff;
    169.         }
    170.       }
    171.     }
    172.     /* .arco-menu {
    173.     } */
    174.     .arco-sub-menu .arco-menu-item {
    175.       width: 128px;
    176.     }
    177.   }
    178. </style>