zj_dierketang/library/components/VabMenu/index.vue

<template>
  <component :is="menuComponent" v-if="!item.meta.hidden" :item-or-menu="item">
    <template v-if="item.children && item.children.length">
      <el-scrollbar
        v-if="
          (layout === 'horizontal' && item.children.length > 18) ||
          (layout !== 'horizontal' && collapse && item.children.length > 18)
        "
        class="vab-menu-children-height"
      >
        <vab-menu
          v-for="route in item.children"
          :key="route.path"
          :item="route"
        />
      </el-scrollbar>
      <template v-else>
        <vab-menu
          v-for="route in item.children"
          :key="route.path"
          :item="route"
        />
      </template>
    </template>
  </component>
</template>

<script lang="ts">
  /* 防止偶发性自动导入失败 */
  import { computed, defineComponent } from 'vue'
  import { storeToRefs } from 'pinia'
  import { useSettingsStore } from '@/store/modules/settings'

  const imports = require.context('./components', true, /\.vue$/)
  const Components: {
    [key: string]: any
  } = {}
  imports.keys().forEach((key) => {
    Components[key.replace(/(\/|\.|vue)/g, '')] = imports(key).default
  })

  export default defineComponent({
    name: 'VabMenu',
    components: Components,
    props: {
      item: {
        type: Object,
        required: true,
      },
      layout: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const settingsStore = useSettingsStore()
      const { collapse } = storeToRefs(settingsStore)

      const menuComponent = computed(() =>
        props.item.children &&
        props.item.children.some((_route: any) => {
          return _route.meta.hidden !== true
        })
          ? 'VabSubMenu'
          : 'VabMenuItem'
      )

      return {
        collapse,
        menuComponent,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vab-menu-children-height {
    height: 60vh !important;
    overflow-y: auto;

    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
  }
</style>

<!--由于element-plus
bug使用popper-append-to-body=false会导致多级路由无法显示，故所有菜单必须生成至body下，样式必须放到body下-->
<style lang="scss">
  .el-popper.is-light {
    border: 0 !important;
  }
</style>