rj-layout

<template> <div id="app"> <Layout :menuList="menuList"> <template v-slot:rightBox> <span>头部左侧</span> </template> <template v-slot:rightBox> <span>头部右侧</span> </tem

Usage no npm install needed!

<script type="module">
  import rjLayout from 'https://cdn.skypack.dev/rj-layout';
</script>

README

在项目中使用

<template>
  <div id="app">
    <Layout :menuList="menuList">
    <template v-slot:rightBox>
                <span>头部左侧</span>
              </template>
      <template v-slot:rightBox>
        <span>头部右侧</span>
      </template>
      <template v-slot:SubNavigation>
        <span>子导航</span>
      </template>
      <!--      routerView-->
      <template v-slot:routerView>
        <router-view />
      </template>
      <template v-slot:footerBox>
        <span>底部</span>
      </template>
    </Layout>
  </div>
</template>
<script>
import Layout from 'r-layout';
export default {
  components:{Layout},
  data(){
    return{
      menuList:[
        {
          path: '/systemSettings/menuTable',
          name: 'MenuTable',
          component: 'MenuTable',
          meta: {
            title: '菜单设置',
            icon: 'el-icon-menu',
            keepAlive: true
          },
          children:[
            {
              path: '/systemSettings/menuTable/11',
              name: 'MenuTable11',
              component: 'MenuTable11',
              meta: {
                title: '菜单设置11',
                icon: 'el-icon-menu',
                keepAlive: true
              },
            }
          ]
        },
        {
          path: '/systemSettings/roleTable',
          name: 'RoleTable',
          component: 'RoleTable',
          meta: {
            title: '角色设置',
            icon: 'el-icon-menu',
            keepAlive: true
          },
          children:[]
        },
        {
          path: '/systemSettings/userTable',
          name: 'UserTable',
          component: 'UserTable',
          meta: {
            title: '用户设置',
            icon: 'el-icon-menu',
            keepAlive: true
          },
          children:[]
        },
        {
          path: '/systemSettings/stationTable',
          name: 'StationTable',
          component: 'StationTable',
          meta: {
            title: '子站申请',
            icon: 'el-icon-menu',
            keepAlive: true
          },
          children:[]
        }
      ]
    }
  }
}
</script>
<style lang="scss">

</style>