Vue自定义组件

1.组件:  huihuiItem.vue

<!--
-->
<template>
  <div class="box">
    <!--            系统首页-->
    <el-menu-item :index="item.menuPath" v-if="item.menuType===1">
      <i :class="item.menuIcon"></i>
      <span slot="title">{{ item.menuTitle }}</span>
    </el-menu-item>

    <!--            商品相关-->
    <el-submenu :index="item.menuPath" v-if="item.menuType===0">
      <template slot="title">
        <i :class="item.menuIcon"></i>
        <span slot="title">{{ item.menuTitle }}</span>
      </template>
      <huihui-item v-for="(item,index) in item.children" :key="index" :item="item"/>
    </el-submenu>




  </div>

</template>

<script>
export default {
  name: "huihuiItem",
  props: ['item']
}
</script>

<style scoped>

</style>

2. 动态菜单使用: 主 index.vue

<template>
  <!--主页-->
  <div class="main-wrapper">
    <el-container>

      <!--      侧边栏-->
      <el-aside width="200px">
        <!--        logo部分-->
        <div class="aside-log-wrapper">
          <img src="@/assets/photo.png" alt=""/>
          <span>瞎写CRM系统</span>
        </div>
        <!--        菜单部分-->
        <!--        设置滚动条-->
        <el-scrollbar>
          <el-menu default-active="2" class="aside-menu-wrapper" router>
<!--            使用自定义组件 实现动态菜单功能-->
            <huihui-item v-for="(item,index) in menuList" :key="index" :item="item"/>
            
          </el-menu>
        </el-scrollbar>

      </el-aside>

      <el-container>
        <!--        头-->
        <el-header><h3>瞎写CRM系统-不是认真的!</h3>

        </el-header>
        <!--        主体-->
        <el-main>
          <div class="main-box">

            <router-view/>
          </div>
        </el-main>
      </el-container>
    </el-container>

  </div>
</template>

<script>
//import auth from "@/utils/auth";
import huihuiItem from "@/components/huihuiItem";

export default {
  name: "index",
  components: {huihuiItem},
  created() {
    //this.menuList = auth.getMenuList();
    this.menuList = JSON.parse(localStorage.getItem("menuList"));


  },
  data() {
    return {
      menuList: [],
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
/*设置满屏*/
.main-wrapper {
  width: 100%;
  height: 100%;
}

/*头部*/
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

/*侧边栏*/
.el-aside {
  background-color: #ffffff;
  color: #333;

  /*logo*/
  .aside-log-wrapper {
    text-align: center;
    background-color: #4c8df3;
    line-height: 60px;
    /*去除logo和头部不对齐*/
    height: 60px;

    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      /*居中对齐*/
      vertical-align: middle;
      margin-right: 8px;
    }

    span {
      font-weight: 600;
      font-family: 华文楷体, serif;
    }
  }

  /*导航栏*/
  .aside-menu-wrapper {
    font-family: 微软雅黑, serif;
  }

  .el-scrollbar {
    height: calc(100% - 60px);
  }

}

/*主体*/
.el-main {
  background-color: #E9EEF3;
  color: #333;
  padding: 5px 0 0 5px;

  .main-box {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 15px 0 0 15px;
    /*清除主体下面滚动条*/
    box-sizing: border-box;
  }
}

.el-container {
  height: 100%;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>