### 导航菜单


:::demo 暂无
```html
<template>
           <div>
             <div class="v-nav-menu">
                    <div class="tab-content">
                        <div class="tab-pane fade active in">
                            <!--菜单树-->
                           <v-menu
                                   ref="menu"
                                   :node-list='nodeList'
                                   active-menu-key="1-10"
                                   :default-expanded-keys=['10-1']
                                   is-expand-all
                                   :icon-click-handler="iconClickHandler"
                                   >
                           </v-menu>
                        </div>
                    </div>
                </div>
           </div>
</template>

<style>
    .v-nav-menu{
        position:inherit !important;
    }

</style>

<script>

import Vue from 'vue';

Vue.component('v-menu-item',{
    template:`<a herf="javascript:void(0);">首页&nbsp;&nbsp;&nbsp;&nbsp;<span @click.stop.prevent="iconClick">+</span></a>`,
    props:{
        node:{
            type:Object,
            default(){
                return {};
            }
        },
        iconClickHandler:{
            type:Function
        }
    },
    data(){
        return {};
    },
    methods:{
        iconClick(){
            if(this.iconClickHandler&& typeof this.iconClickHandler=="function"){
                alert('图标点击事件');
                this.iconClickHandler(this.node);
            }
        }
    }
});

  export default {
    data() {
      return {
        defaultExpandedKeys: ['10'],
        nodeList:[
            {
                id: "1", name: '舆情资讯',componentName:'v-menu-item', childNode: [
                {id: '1-1', linkTo: 'https://www.baidu.com/', isHref:true, name: '新闻'},
                {id: '1-10', linkTo: '/weibo', name: '微博'},
                {id: '1-20', linkTo: '/guba', name: '股吧'},
                {id: '1-30', linkTo: '/investorQA', name: '投资者问答'}]
            },
            {
                id: "10", name: '研报公告', childNode: [
                {id: '10-1', linkTo: '/report', name: '研究报告'},
                {id: '10-10', linkTo: '/notice', name: '公司公告'}]
            },
            {
                id: "20", name: '政策法规', childNode: [
                {id: '20-1', linkTo: '/regulatoryDynamics', name: '监管动态'}]
            }
        ]

      }
    },
    methods:{

         getCurrentNode(){

            var info = this.$refs.menu.getCurrentNodeByKey('10-10');
            console.log(info)
         },
         iconClickHandler(){
             alert("触发了");
         }
    }
  };
</script>
```
:::

### Attributes
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| is-expand-all | 是否展开全部 | boolean | — | false |
| node-list | 传入的菜单对象集合 | string | — | — |
| active-menu-key | 当前选中的菜单 | string、Number | — | — |
| default-expanded-keys | 默认需要展开的菜单 | array | — | — |


### node-list（NavMenu Props）
| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| id | 每个菜单项的唯一标识，不能重复(多级菜单层级之间用'-'分隔) | String|Number | — | true |
| linkTo | 要连接的地址 | String | — | true |
| name | 当前菜单名称 | string | — | true |
| isLikeMatch | 多级路由时，顶级路由模糊匹配 | boolean | — | false |
| componentName | 当前菜单节点的自定义组件 | String | — | false |


### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
|change-active-menu | 菜单改变的事件 | currentNode （当前选中的node 节点对象） |
|icon-click-handler | 图标点击事件 | currentNode （当前选中的node 节点对象） |

### Methods
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
|getCurrentNodeByKey | 通过菜单id 获取当前节点对象 | currentNode  |