<template>
  <div class="navMenu">
    <label v-for="navMenu in navMenus">
      <!-- 单级菜单 -->
      <el-menu-item class="menuRights" v-if="navMenu.children.length==0" :key="navMenu.text" :data="navMenu"
        :index="navMenu.name" :route="navMenu.value">
        <i :class="navMenu.icon" class="m-r-13"></i>
        <span slot="title">{{navMenu.text}}</span>
      </el-menu-item>

      <!-- 多级菜单 -->
      <el-submenu class="menuLengs" v-if="navMenu.children.length!==0" :key="navMenu.text" :data="navMenu"
        :index="navMenu.name">
        <template slot="title">
          <i :class="navMenu.icon" class="m-r-13 menuLe"></i>
          <span class="narrowLen"> {{navMenu.text}}</span>
        </template>
        <navMenu :navMenus="navMenu.children"></navMenu>
      </el-submenu>
    </label>

  </div>
</template>
<script>
  /**
   * navMenus 为菜单栏树型结构参数
   */
  import navMenu from './menu.vue';
  export default {
    name: 'NavMenu',
    props: ['navMenus'],
    data() {
      return {}
    },
    components: {
      navMenuc: navMenu
    },
    mounted() {
    },
    methods: {
    }
  }

</script>

<style scoped>
  .m-r-13 {
    margin-right: 13px;
  }

  #page .menuLengs .menuRights {
    padding-left: 47px !important;
  }

  .icon-xitongjiankong:before {
    width: 14px;
  }

</style>