说明

基于 ant design vue 组件库、less css 预处理器、windicss 封装的布局组件，仅用于 IBG 产研二部 使用

注意

• 目前所有布局组件中对于背景和字体颜色采用了 less 变量，在 styles/var/* 文件下，使用时请全局引入使用
• 面包屑和菜单项都是通过 router 配置和当前路由自动获取，内部封装的

使用示例

props: {
   routes: { type: Array as PropType<RouteRecordRaw[]>, // 当前路由 注意
   // 路由配置中的meta: {
   //    title: String, // 显示的文本
   //    icon: String, // 前面的icon
   //    hideMenu: Boolean, // 是否在菜单中隐藏
   //    activePath: String, // 和hideMenu true一起使用，隐藏时，设置菜单选中的路径项
   //    }
   required: true,
   },
   title: { type: String, },
   showTime: { type: Boolean, default: true,
  },
  logo: { type: String, },
  transMenuCallback: { type: Function as PropType<(menus: menuType[]) => void>, // 将routes转化为menu后执行,
  }
}
>

<script setup lang="ts">
import LayoutComponent from 'ibg-base-layout'

import { defaultRoute } from './router/src/defineRoute'
import logo from './assets/vue.svg'
</script>

<template>
  <LayoutComponent
    :routes="defaultRoute"
    :show-time="true"  // 是否显示时间
    :title="'测试'" // 标题
    :logo="logo" // logo
  >
   // 下面是以插槽的形式使用
    <template #title>
      <span>zhegeshibushi测试</span>
    </template>
    <template #action>
      <span>测试</span>
      <span>测试</span>
      <span>测试</span>
    </template>
  </LayoutComponent>
</template>

结果

https://venusgroup.feishu.cn/docx/RZzedQp3CoHiQDxVA9OcVhhtnPf