element-ui多级菜单+面包屑导航封装

ゝ一纸荒年。 2023-02-11 08:46 5阅读 0赞

根据文件结构 依次贴出代码好了 ，里面有请求的接口数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]  
header index.vue 这个文件是到航头 面包屑导航

<template>
      <div class="header">
        <div id="header-sidebar-open-close">
          <i
            :class="[ getsidebar.opened ? 'el-icon-s-unfold' : 'el-icon-s-fold', 'icon', ]"
            @click="toggleSideBar"
          ></i>
          <el-tag
            v-for="(tag, index) in crumbsList"
            :key="index"
            :class="isActive(tag) ? 'tagsd' : 'istag'"
            :closable="tag.title != '首页'"
            @click="routeTag(tag)"
            @close="delTag(tag, index)"
          >
            { {  tag.title }}
          </el-tag>
        </div>
      </div>
    </template>
    
    <script>
    import {  mapGetters, mapMutations } from "vuex";
    export default { 
      data() { 
        return { };
      },
      created() { },
      methods: { 
        // 切换菜单状态
        toggleSideBar() { 
          this.$store.dispatch("ToggleSideBar");
        },
        // 添加样式
        isActive(tag) { 
          return tag.name === this.$route.name;
        },
        // 点击标签跳转路由
        routeTag(tag) { 
          this.$router.push(tag.pathname);
        },
        delTag(tag, index) { 
          this.crumbsList.splice(this.crumbsList.indexOf(tag), 1);
          if (this.crumbsList.length == 1) { 
            this.$router.push({  path: "/system/index" });
          }
          if (tag.name === this.$route.name) { 
            this.$router.push({ 
              path: this.crumbsList[this.crumbsList.length - 1].pathname,
            });
          }
        },
      },
      computed: { 
        ...mapGetters(["getsidebar", "getavatar"]),
        crumbsList() { 
          return this.$store.state.sidebar.tagList;
        },
      },
    };
    </script>
    
    <style scoped lang="scss">
    /deep/.el-breadcrumb { 
      line-height: 3px;
      margin-left: 6px;
    }
    /deep/.el-tag { 
      margin-left: 10px;
      height: 28px;
      line-height: 28px;
      margin-top: 6px;
      cursor: pointer;
    }
    .header { 
      width: 100%;
      background-color: #eaebec;
      height: 40px;
    }
    .icon { 
      font-size: 30px;
      margin-top: 8px;
    }
    .avatar-container { 
      height: 40px;
      display: fexd;
      position: absolute;
      right: 35px;
      margin-top: 10px;
    }
    .user-avatar { 
      border-radius: 10px;
      cursor: pointer;
    }
    #header-sidebar-open-close { 
      display: flex;
    }
    .istag { 
      background: #fff;
      color: #17a2b8;
    }
    .tagsd { 
      background: #17a2b8;
      color: #fff;
    }
    /deep/.el-tag .el-tag__close { 
      color: #17a2b8;
    }
    </style>

sidebar index.vue

<template>
      <div>
        <el-menu
          :default-active="$route.path"
          :background-color="variables.menuBg"
          :text-color="variables.menuText"
          :active-text-color="variables.menuActiveText"
          mode="vertical"
          router
          :collapse="isCollapse"
          :unique-opened="true"
          :collapse-transition="true"
        >
          <sidebar-item :menu="getrouters" />
        </el-menu>
      </div>
    </template>
    
    <script>
    import {  mapGetters } from "vuex";
    import SidebarItem from "./SidebarItem";
    import variables from "@/styles/variables.scss";
    import {  getRoleMenuByUserId } from "@/http/sidebar.js";
    export default { 
      data() { 
        return { 
          getrouters: [],
        };
      },
    
      components: {  SidebarItem },
      computed: { 
        ...mapGetters(["getsidebar"]),
        isCollapse() { 
          return !this.getsidebar.opened;
        },
        variables() { 
          return variables;
        },
      },
      created() { 
        getRoleMenuByUserId({  menuType: 0 }).then((res) => { 
          res.data.data.meNuCodeList[0].childList.push({ 
            childList: null,
            createDate: "20200402",
            icon: null,
            menuCode: "Data-migration",
            menuName: "数据移植",
            menuType: "0",
            menuUrl: "/system/migration",
            orderNum: 1,
          });
          res.data.data.meNuCodeList.push({ 
            childList: [
              { 
                createDate: "20200405",
                icon: null,
                menuCode: "investmentAccount",
                menuName: "理财产品",
                menuType: "0",
                menuUrl: "/account/investment",
                parentCode: "liabilityManager",
                perms: "financing:view",
              },
              { 
                createDate: "20200405",
                icon: null,
                menuCode: "combinedAccount",
                menuName: "资产组合",
                menuType: "0",
                menuUrl: "/account/combined",
              },
            ],
            createDate: "20200404",
            icon: null,
            menuCode: "assetManagement",
            menuName: "资产管理",
            menuType: "0",
            menuUrl: "/account",
          });
          this.getrouters = res.data.data.meNuCodeList;
          console.log(this.getrouters, "sss");
        });
      },
    };
    </script>
    <style></style>

sidebar SidebarItem.vue

<template>
      <div class="menu-wrapper">
        <template v-for="item in menu">
          
          <el-menu-item
            v-if="!item.childList"
            :key="item.menuUrl"
            :index="item.menuUrl+''"
            @click="handleRouter(item)"
          >
            <i :class="item.icon"></i>
            <span slot="title">{ {  item.menuName }}</span>
          </el-menu-item>
          
          <el-submenu
            v-if="item.childList"
            :key="item.menuUrl"
            :index="item.menuUrl+''"
            @click="handleRouter(item)"
          >
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{ {  item.menuName }}</span>
            </template>
            
            <sidebar-item :menu="item.childList" />
          </el-submenu>
        </template>
      </div>
    </template>
    
    <script>
    import {  mapMutations } from "vuex";
    export default { 
      name: "SidebarItem",
      props: ["menu"],
      data() { 
        return { };
      },
      methods: { 
        ...mapMutations(["handleRouter"], "item")
      }
    };
    </script>
    
    <style scoped>
    .title { 
      color: #fff;
    }
    </style>

接下来是store vuex 里面的个公共数据  
![这里插入图片描述][20200522152050731.png]  
app.js 这个是管点击图标 菜单切换伸缩状态

sidebar.js 这个文件是点击菜单 添加到面包屑导航里面

store index.vue 这个文件就是把上边的两个文件引入这里

import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    import app from "./modules/app";
    import sidebar from "./modules/sidebar";
    export default new Vuex.Store({ 
      modules: { 
        app,
        sidebar,
      }
    });

好了 基本的封装就完事啦

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522152031455.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ1MDQzMTA1,size_16,color_FFFFFF,t_70
[20200522152050731.png]: https://img-blog.csdnimg.cn/20200522152050731.png