导航菜单

![](/media/202404/2024-04-29_165240_529774.png)

------------
导航菜单

------------
代码示例如下
```html
<template>
    <div>
        <hi-nav-menu v-bind="param" @item-click="aa" > </hi-nav-menu>
    </div>
</template>

};
</script>
```

</div>

### Attributes

| 参数                | 说明                      | 类型      | 可选值                   | 默认值      |
|-------------------|-------------------------|---------|-----------------------|----------|
| datasource        | 字段类别数据集                 | array   | ——                    | ——       |
| pidField          | 父节点字段ID                 | string  | ——                    | ——       |
| idField           | 节点字段ID                  | string  | ——                    | ——       |
| valueField        | 显示字段ID                  | string  | ——                    | ——       |
| mode              | 模式                      | string  | horizontal / vertical | vertical |
| uniqueOpened      | 是否只保持一个子菜单的展开           | boolean | ——                    | false    |
| background-color  | 菜单的背景色（仅支持 hex 格式）      | string  |                       | #ffffff  |
| text-color        | 菜单的文字颜色（仅支持 hex 格式）     | string  | ——                    | #303133  |
| active-text-color | 当前激活菜单的文字颜色（仅支持 hex 格式） | string  | ——                    | #409EFF  |

### Events

| 事件名称       | 说明   | 回调参数        |
|------------|------|-------------|
| item-click | 单击触发 | 选中菜单项的 data |

</style>