#NavMenu 导航菜单
为网站提供导航功能的菜单。

<script>
export default {
  components: {},
  data() {
    return{
        defaultActive: '1-2-1',
        select(index){
            this.defaultActive = index;
        },
        indentChange($event) {
            console.log($event)
        }
    }
  }
}
</script>

## 侧栏1
垂直菜单，可内嵌子菜单。
:::demo 使用`f-icon`嵌入图标
````html
<div style="position: relative;display: inline-block;">
    <efly-nav-menu :default-active="defaultActive" down-icon="icon-down" @change="select($event)" @indentChange="indentChange">
        <i class="icon icon-more" slot="unfold"></i>
        <i class="icon icon-search" slot="indent"></i>
        <efly-nav-menu-item index="1">
            <i class="icon icon-more" slot="icon"></i>
            <span slot="title">导航1</span>
            <efly-nav-menu-group>
                <efly-nav-menu-item index="1-1">
                    <i class="icon icon-more" slot="icon"></i>
                    <span slot="title">子导航1</span>
                    <efly-nav-menu-group>
                        <efly-nav-menu-item index="1-1-1" v-if="'false'">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航1</span>
                        </efly-nav-menu-item>
                        <efly-nav-menu-item index="1-1-2">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航2</span>
                        </efly-nav-menu-item>
                        <efly-nav-menu-item index="1-1-3">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航3</span>
                        </efly-nav-menu-item>
                        <efly-nav-menu-item index="1-1-4">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航4</span>
                        </efly-nav-menu-item>
                    </efly-nav-menu-group>
                </efly-nav-menu-item>
                <efly-nav-menu-item index="1-2">
                    <i class="icon icon-more" slot="icon"></i>
                    <span slot="title">子导航2</span>
                    <efly-nav-menu-group>
                        <efly-nav-menu-item index="1-2-1">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航5</span>
                        </efly-nav-menu-item>
                        <efly-nav-menu-item index="1-2-2">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航2</span>
                        </efly-nav-menu-item>
                        <efly-nav-menu-item index="1-2-3">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航3</span>
                        </efly-nav-menu-item>
                        <efly-nav-menu-item index="1-2-4">
                            <i class="icon icon-more" slot="icon"></i>
                            <span slot="title">子子导航4</span>
                        </efly-nav-menu-item>
                    </efly-nav-menu-group>
                </efly-nav-menu-item>
            </efly-nav-menu-group>
        </efly-nav-menu-item>
       <efly-nav-menu-item index="2">
            <i class="icon icon-more" slot="icon"></i>
            <span slot="title">导航2</span>
        </efly-nav-menu-item>
    </efly-nav-menu>
</div>

<script>
export default {
  components: {},
  data() {
    return{
       defaultActive: '2',
        select(index){
            console.log(index)
        }
    }
  }
}
</script>

````
:::


## 侧栏2
垂直菜单，可内嵌子菜单。
:::demo 使用`f-icon`嵌入图标
````html
<div style="position: relative;display: inline-block;">
    <efly-nav-menu-admin  down-icon="icon-down" defaultActive="1-2-1" @change="select($event)">
        <i class="icon icon-more" slot="unfold"></i>
        <i class="icon icon-search" slot="indent"></i>
        <efly-nav-menu-admin-item index="1">
            <i class="icon icon-more" slot="icon"></i>
            <span slot="title">资源管理</span>
            <efly-nav-menu-admin-group title="云实例" icon="icon-more">
                <efly-nav-menu-admin-item index="1-1-1">
                    <span slot="title">创建云主机</span>
                </efly-nav-menu-admin-item> 
                <efly-nav-menu-admin-item index="1-1-2">
                    <span slot="title">云主机</span>
                </efly-nav-menu-admin-item> 
            </efly-nav-menu-admin-group>
            <efly-nav-menu-admin-group title="云存储" icon="icon-more">
                <efly-nav-menu-admin-item index="1-2-1">
                    <span slot="title">云磁盘</span>
                </efly-nav-menu-admin-item> 
                <efly-nav-menu-admin-item index="1-2-2">
                    <span slot="title">云快照</span>
                </efly-nav-menu-admin-item>
                <efly-nav-menu-admin-item index="1-2-3">
                    <span slot="title">镜像管理</span>
                </efly-nav-menu-admin-item>  
            </efly-nav-menu-admin-group>
        </efly-nav-menu-admin-item> 
        <efly-nav-menu-admin-item index="2">
            <i class="icon icon-more" slot="icon"></i>
            <span slot="title">资源管理</span>
        </efly-nav-menu-admin-item> 
        <efly-nav-menu-admin-item index="3">
            <i class="icon icon-more" slot="icon"></i>
            <span slot="title">资源管理</span>
        </efly-nav-menu-admin-item> 
        <efly-nav-menu-admin-item index="4">
            <i class="icon icon-more" slot="icon"></i>
            <span slot="title">资源管理</span>
        </efly-nav-menu-admin-item> 
        <efly-nav-menu-admin-item index="5">
            <i class="icon icon-more" slot="icon"></i>
            <span slot="title">资源管理</span>
        </efly-nav-menu-admin-item> 
    </efly-nav-menu-admin>
</div>

<script>
export default {
  components: {},
  data() {
    return{
       defaultActive: '2',
        select(index){
            console.log(index)
        }
    }
  }
}
</script>

````
:::


## 参数说明
|   参数     |   说明    | 类型      | 可选值       | 默认值   |
|---------  |-------- |---------- |-------------  |-------- |
|default-active   |默认选中     | String  |  index值  |    —     |
|downIcon   | 下图标     | String  |  -  |    —     |

## 事件
| 事件名称      | 说明    | 回调参数   
|---------- |-------- |---------- |
| select     | 点击事件   |  对应选项index  |