Day08--导航菜单自渲染--组件递归

导航菜单自渲染–组件递归

• 在 ‘@/views/layout/components’ 下新建 Menu.vue 用于导航菜单自渲染组件

  <!-- 左侧导航菜单自渲染 -->
  <template>
      <div class="menu">
          <!-- 遍历菜单数据 -->
          <template v-for="menu in data">
              <!-- 如果没有子菜单 -->
              <template v-if="!menu.children">
                  <el-menu-item :index="menu.path" :key="menu.id">
                      <!-- 如果有图标 -->
                      <template v-if="menu.icon">
                      <!-- 当设置了icon属性 并且名称以 icon- 开头 -->
                      <i :class="[menu.icon, {iconfont: menu.icon && menu.icon.startsWith('icon-')}]"></i>
                      <span slot="title">{{menu.title}}</span>
                      </template>
                      <!-- 如果没有图标 -->
                      <template v-else>{{menu.title}}</template>
                  </el-menu-item>
              </template>
              <!-- 如果有子菜单 -->
              <template v-else>
                  <el-submenu :index="menu.path" :key="menu.id">
                      <template slot="title">
                          <!-- 如果有图标 -->
                          <template v-if="menu.icon">
                          <!-- 当设置了icon属性 并且名称以 icon- 开头 -->
                          <i :class="[menu.icon, {iconfont: menu.icon && menu.icon.startsWith('icon-')}]"></i>
                          <span>{{menu.title}}</span>
                          </template>
                          <!-- 如果没有图标 -->
                          <template v-else>{{menu.title}}</template>
                          </template>
                          <!-- 递归 -->
                          <Menu :data="menu.children"></Menu>
                  </el-submenu>
              </template>
          </template>
      </div>
  </template>
  
  <script>
      export default {
      name: 'Menu',
      // 用于接收菜单数据
      props: {
          data: [Array]
      }
      }
  </script>
  
  <style scoped>
  
  </style>
  
  

• 新建 ‘@/assets/json/menu.json’ 用于存放测试的菜单文件数据

  [{
  "name": "dashboard",
  "icon": " ",
  "path": "/dashboard",
  "title": "数据看板",
  "isMenu": true,
  "keepAlive": true,
  "component": "dashboard"
  }, {
  "name": "tools",
  "icon": " ",
  "path": "/tools",
  "title": "工具集",
  "isMenu": true,
  "redirect": "/tools/pdf2word",
  "children": [{
      "name": "PdfTOWord",
      "path": "/tools/pdf2word",
      "title": "文字版PDF转Word",
      "isMenu": true,
      "component": "/tools/PdfTOWord"
  }, {
      "name": "PdfScanToPdf",
      "path": "/tools/pdfscan2pdf",
      "title": "扫描版PDF转PDF",
      "isMenu": true,
      "keepAlive": false,
      "component": "tools/PdfScanToPdf"
  }]
  }, {
  "name": "control",
  "icon": " ",
  "path": "/control",
  "title": "控制台",
  "redirect": "noRedirect",
  "isMenu": true,
  "children": [{
      "name": "account",
      "path": "/control/account",
      "title": "账户管理",
      "isMenu": true,
      "component": "control/account"
  }]
  }, {
  "name": "store",
  "icon": " ",
  "path": "/store",
  "title": "市场",
  "redirect": "/store/appstore",
  "isMenu": true,
  "children": [{
      "name": "AppStore",
      "path": "/store/appstore",
      "title": "应用市场",
      "isMenu": true,
      "component": "store/AppStore"
  },
      {
      "name": "Plugs",
      "path": "/store/plugs",
      "title": "插件市场",
      "isMenu": true,
      "component": "store/Plugs"
      }]
  }, {
  "name": "community",
  "icon": " ",
  "path": "/community",
  "title": "社区",
  "isMenu": true,
  "redirect": "/community/docs",
  "children": [{
      "name": "docs",
      "path": "/community/docs",
      "title": "文档",
      "isMenu": true,
      "children": [{
      "name": "help",
      "path": "/community/docs/help",
      "title": "帮助文档",
      "isMenu": true,
      "component": "community/docs/Help"
      }]
  }]
  }]
  
  

• 在 Sidebar.vue 中引用 Menu.vue 菜单自渲染组件

  <!-- 左侧边栏 -->
  <template>
  <div class="sidebar">
  <el-menu
          default-active="2"
          class="left-menu"
          background-color="#304151"
          text-color="#bfcbd1"
          active-text-color="#409EFF">
      <!-- 菜单自渲染组件 -->
      <Menu :data="menuData"></Menu>
  </el-menu>
  </div>
  </template>
  
  <script>
  // 引入Menu菜单自渲染组件
  import Menu from './Menu'
  // 引入菜单数据
  import menu from '@/assets/json/menu.json'
  export default {
  name: 'Sidebar',
  components: {
      Menu // 注册Menu菜单自渲染组件
  },
  // 菜单数据域
  data () {
      return {
      menuData: []
      }
  },
  mounted () {
      // 初始化菜单数据
      this.menuData = menu
  }
  }
  </script>
  
  <style scoped lang="stylus">
  .left-menu
      boder none
      user-select none
      .menu
      overflow hidden
  </style>
  

• npm run dev 运行项目,可以看到菜单根据 json 文件自动生成

项目仓库

Gitee