Menu菜单
Menu模块是折叠菜单模块，用于制作无限层级的父子菜单；Menu模块的另外一个形态是AX-MENU自定义标签；Menu模块默认是垂直菜单，可以通过row:true转为水平导航。
前言
本菜单模块是基于Tree模块开发的，所以在使用本模块时候可通过操作Tree模块来实现。本菜单模块功能强大，能满足大多数场景需求。
其功能和特性如下：
- 支持多种数据源，包括ul+li物理节点、页面数组数据和json数据（数组又支持tree数组和带pId的一维数组）、函数返回值、sql数据等
- 支持纵向菜单和横向导航
- 支持多种监听回调
- 支持数据保存和刷新恢复加载
- 支持两种触发方式，分别是click和hover
- 支持两种内容，分别是A链接和文本
- 支持数据无限层级
- 支持菜单的增删改操作
- 支持菜单子项转移
- 支持自定分支结构
简单使用
对ul+li或ol+li结构的容器节点使用ax-menu属性即可。
如果需要让节点成为超链接，请使用href属性。
也可以通过id+new的方式创建实例。
参数属性
对应的组件使用别名，例如：<ax-menu expand-all></ax-menu>。
| 属性名(prop) | 属性别名(attr) | 值类型 | 默认值 | 说明 |
|---|---|---|---|---|
| theme | theme | 'light'/'dark' | 'light' | 主题风格 |
| content | content | 节点选择器/string/Function/Promise/AsyncFunction/ Object/Array/HTMLElement |
'' | 内容 |
| contType | cont-type | 'text'/'html'/'async'/'' | 'text' | 内容类型 |
| contData | cont-data | object | {} | 异步内容的数据 |
| ajax | ajax | object | {} | 获取数据时异步请求参数，包括type、xhrName、spinSel等 |
| dispose | dispose | boolean | false | 是否禁止使用 |
| expose | expose | boolean | false | 是否完全展开父节点（不可折叠） |
| active | active | number/string/number[]/string[] | '' | 初始化激活的节点 |
| disable | disable | number/string/number[]/string[] | '' | 初始化禁用的节点 |
| multiple | multiple | boolean | false | 是否允许打开多个父节点 |
| expandAll | expand-all | boolean | false | 是否完全展开父节点（可折叠） |
| zIndex | z-index | number | 0 | 设置根节点的z-index值 |
| trigger | trigger | 'click'/'hover' | 'click' | 展开节点的触发方式 |
| rootStart | root-start | number | ax.config.rootStart | 根节点编号 |
| idStart | id-start | number | ax.config.idStart | 数据第一项编号 |
| floorStart | floor-start | number | ax.config.floorStart | 数据第一层编号 |
| pathHyphen | path-hyphen | string | ax.config.pathHyphen | 路径连接符 |
| duration | duration | number | 0 | 展开和折叠动画时间，默认有模块自动计算 |
| arrow | arrow | object/boolean | {enable,icon} | 是否启用右侧指示箭头 |
| pageClose | page-close | boolean | false | 是否允许菜单之外点击折叠，对trigger=click有效 |
| classes | classes | string/string[] | '' | 宿主节点的classNames |
| unpadded | unpadded | boolean | false | 是否取消宿主节点的边距 |
| lamp | lamp | 'line'/'dot'/'block'/'' | '' | 激活时指示灯类型 |
| full | full | boolean | false | 宿主节点是否铺满容器（width=100%） |
| spill | spill | boolean | false | 是否向右侧溢出子菜单 |
| linkage | linkage | boolean | true | 是否父子菜单联动 |
| layout | layout | string | indent|icon|disk|cube|image|label| custom|tips|badge|arrow |
分支节点布局 |
| drawer | drawer | object/boolean | {} | 使用ax.Drawer模块的参数 |
| nav | nav | object/boolean | {enable:false} | 使用水平菜单的参数 |
| tree | tree | object | {} | tree实例的参数 |
监听事件
| 事件名 | 别名(参数内用) | 参数 | 返回值 | 说明 |
|---|---|---|---|---|
| activated | onActivated | (items) | this | 激活分支后执行 |
| locked | onLocked | () | this | 整体禁用后执行 |
| unlocked | onUnlocked | () | this | 整体解禁后执行 |
| updatedCont | onUpdatedContent | (data) | AsyncFunction | 更新参数content后执行 |
由于内置了Tree实例，可使用tree的监听事件，详情请点击这里。
内置变量
由于内置了Tree实例，可使用tree的内置变量，详情请点击这里。
内置方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| activate(items[,cb]) | this | 激活节点，items可以为单值也可为数组 |
由于内置了Tree实例，可使用tree的内置方法，详情请点击这里。
示例操作
通过一个示例演示：activate、add、remove、expand、select等操作以及若干事件监听。
- 输出
- HTML
- JS
-
-
-
let arr = [ { "label": "北京市", "children": [ { "label": "朝阳区" }, { "label": "丰台区" }, { "label": "海淀区" } ] }, { "label": "广东省", "children": [ { "label": "广州市" }, { "label": "深圳市" } ] }, { "label": "上海市" }, { "label": "重庆市" } ] let opIns = new ax.Menu('#opHost', { content: arr, active:[0,7] }), opAdd = document.querySelector('#opAdd'), opRemove = document.querySelector('#opRemove'), opEdit = document.querySelector('#opEdit'), opData = document.querySelector('#opData'); opAdd.onclick = () => { opIns.treeIns.add({data:{label:'青海省'}}); } opRemove.onclick = () => { opIns.treeIns.remove(0); } opEdit.onclick = () => { opIns.treeIns.edit(7,{label:'上海市被修改了'}); } opData.onclick = () => { console.log(opIns.treeIns.flatData); console.log(opIns.treeIns.treeData); } opIns.treeIns.on('add',(data)=>{ console.log('新增：',data) }).on('edit',(data)=>{ console.log('编辑：',data) }).on('remove',(data)=>{ console.log('删除：',data) }).on('expand',(data)=>{ console.log('展开：',data) }).on('collapse',(data)=>{ console.log('折叠：',data) }).on('select',(data)=>{ console.log('选中：',data) })
