layout-view

使用

基本功能

// 左侧菜单目录配置
asideConfig:{
  WIDTH: "220px", // 菜单展开宽度
  WIDTH_FOLD: "56px", // 菜单收起宽度
  LOGO_SRC: "/images/admin-logo.png", // 默认展示的logo
  LOGO_SRC_FOLD: "/images/admin-logo-fold.png", // 菜单收起展示的logo
  BG_COLOR: "#191a23", // 菜单背景色
  TEXT_COLOR: "#fff", // 菜单 -> 默认颜色
  ACTIVE_TEXT_COLOR: "#fff", // 菜单字体 -> 激活颜色
  ACTIVE_ITEM_BG_COLOR: "#4091f7", // 菜单字体 -> 激活背景色
}
// 导航配置
headerConfig:{
  HEIGHT: "60px", // 高度
  BG_COLOR: "#f00", // 背景色
}

// 菜单数据实例
menus = [
  {
    name: "系统管理",
    path: "/1",
    meta: { icon: "alipay" },
    children: [
      {
        name: "权限管理",
        path: "/permission",
        meta: { icon: "alipay" },
        children: [
          { name: "角色管理", path: "/role" },
          { name: "资源管理", path: "/res" },
        ],
      },
      {
        name: "字典管理",
        path: "/dict",
      },
    ],
  },
  {
    name: "营销管理",
    path: "/2",
    meta: { icon: "alipay" },
  },
]

// html
<layout-view
  :asideConfig="defaultConfig.ASIDE"
  :headerConfig="defaultConfig.HEADER"
  :menus="menusData" />

支持插槽

<layout-view
  :headerConfig="defaultConfig.HEADER"
  :asideConfig="defaultConfig.ASIDE"
  :menus="menusData">
  <!-- 展开收起插槽 -->
  <template #menu-expand="{ expand }">
    <span v-if="expand">展开</span>
    <span v-else>收起</span>
  </template>
  <!-- //END 展开收起插槽 -->

  <!-- header上的右侧插槽 -->
  <template #header-right> awdasd </template>
  <!-- //END header上的右侧插槽 -->
</layout-view>