vue elment 导航栏

嗯   导航栏，，没错，，，要动态的。。。嗯。。自己封装了个分组的动态导航栏

 

<template>

  <fragment>
      <template v-for="(subMenu, subIndex) in navList">
      <!--只有一级菜单-->
      <el-menu-item v-if="!subMenu.children" :key="subIndex" :index="subMenu.path">
        <i  color="#FFFFFF" class="el-icon-location"></i>
        <span slot="title">{{ subMenu.name }}</span>
      </el-menu-item>
      <el-submenu v-else :index="subMenu.path + ''" :key="subMenu.path+subIndex">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span >{{ subMenu.name }}</span>
        </template>
        <el-menu-item-group>
          <span slot="title" v-show="drawer">{{ subMenu.name }}</span>
          <ZtMenuItem v-if="subMenu.children&&subMenu.children.length>0"
                      :nav-list="subMenu.children" />
            <el-menu-item v-else  :index="subMenu.path">
              <i class="el-icon-location"></i>
              <span slot="title">{{subMenu.name}} </span>
            </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      </template>
  </fragment>
</template>

<script>
    export default {
        name: "ZtMenuItem",
      props:{
        navList:{
          type:Array,
          default:()=>{return []}
        },
        drawer:{
          type:Boolean,
          default:true,
        }
      }
    }
</script>

<style scoped lang="less">
  
</style>

 使用：

<el-menu
        :default-active="activeIndex"
        @select="handleSelect"
        router
        class="el-menu-vertical-nav color-white"
        text-color="#FFFFFF"
        active-text-color="#FFFFFF"
        :background-color="drawer ? '#14191F' : 'transparent'"
        :show-timeout="50"
        :hide-timeout="50"
        :collapse="drawer">
        <z-item  :nav-list="navList"
                  :drawer="drawer"
        ></z-item>
       </el-menu>

注意，，使用了vue  fragment   这样再引用子组件的时候不会多加一层div  导致文字无法收起的bug
引入 ： npm install --save vue-fragment
使用 在 main.js 中
import Fragment from 'vue-fragment' ；
Vue.use(Fragment.Plugin)；

说下 我用的时webpack  cil3 建立的项目了