Menu菜单
Menu模块是折叠菜单模块，用于制作无限层级的父子菜单；Menu模块的另外一个形态是AX-MENU自定义标签；Menu模块默认是垂直菜单，可以通过row:true转为水平导航。
前言
menu是项目开发中最长见到的组件模块之一，通过menu可实现单页或跨页跳转。本框架的menu模块特点如下：
- 支持多种数据源，包括ul+li物理节点、页面数组数据和json数据（数组又支持tree数组和带pId的一维数组）、函数返回值、sql数据等
- 支持纵向菜单和横向导航
- 支持多种监听回调
- 支持数据保存和刷新恢复加载
- 支持两种触发方式，分别是click和hover
- 支持两种内容，分别是a链接和文本
- 支持数据无限层级
- 支持菜单的增删改操作
- 支持菜单子项转移
- 支持使用组件
参数属性
对应的组件使用别名，例如：<ax-menu expand-all></ax-menu>。
| 属性名(prop) | 属性别名(attr) | 值类型 | 默认值 | 说明 |
|---|---|---|---|---|
| scheme | scheme | '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 | 同ax.valToArr第一个参数，详细 | '' | 初始化激活的节点 |
| disable | disable | 同ax.valToArr第一个参数，详细 | '' | 初始化禁用的节点 |
| 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} | 是否启用右侧指示箭头 |
| max | max | number | 0 | 最多允许多少个节点，默认不限制 |
| pageClose | page-close | boolean | false | 是否允许菜单之外点击折叠，对trigger=click有效 |
| popup | popup | object | {} | 使用ax.Popup模块的参数 |
| classes | classes | 同ax.classes.add第一个参数，详细 | '' | 宿主节点的classNames |
| addActive | add-active | boolean | false | 新增节点后是否成为焦点（selected） |
| gapless | gapless | boolean | false | 是否取消宿主节点的边距 |
| rise | rise | boolean | false | 当使用了active方法后，是否允许联动打开所有父层 |
| lamp | lamp | 'line'/'dot'/'' | '' | 激活时指示灯类型 |
| full | full | boolean | false | 宿主节点是否铺满容器（width=100%） |
| spill | spill | boolean | false | 是否向右侧溢出子菜单 |
| drawer | drawer | object/boolean | {enabel} | 使用ax.Drawer模块的参数 |
| row | row | object/boolean | {enabel} | 使用水平菜单的参数 |
| b4Expand | b4-expand | function | null | 等待函数，expand之前执行，如返回Promise则等待resolve |
| b4Collapse | b4-collapse | function | null | 等待函数，collapse之前执行，如返回Promise则等待resolve |
| b4Add | b4-add | function | null | 等待函数，add之前执行，如返回Promise则等待resolve |
| b4Edit | b4-edit | function | null | 等待函数，edit之前执行，如返回Promise则等待resolve |
| b4Remove | b4-remove | function | null | 等待函数，remove之前执行，如返回Promise则等待resolve |
| b4Graft | before-graft | function | null | 等待函数，graft之前执行，如返回Promise则等待resolve |
监听事件
| 事件名 | 别名(参数内用) | 参数 | 返回值 | 说明 |
|---|---|---|---|---|
| render | onRender | (treeData,flatData) | this | 获得数据并节点渲染完毕后执行 |
| trigger | onTrigger | (item) | this | 触发expand事件后执行，可能是指示箭头触发的 |
| add | onAdded | (items) | this | 新增项后执行 |
| remove | onRemoved | (items) | this | 删除项前执行 |
| edit | onEdited | (item) | this | 编辑项后执行 |
| graft | onGrafted | (item) | this | 转移项后执行 |
| disable | onDisable | (items) | this | 禁用项后执行 |
| enable | onEnable | (items) | this | 启用项后执行 |
| disableAll | onDisableAll | () | this | 全部禁用后执行 |
| enableAll | onEnableAll | () | this | 全部启用后执行 |
| expand | onExpanded | (item) | this | 展开一项完成后执行 |
| collapse | onCollapsed | (item) | this | 折叠一项完成后执行 |
| expandAll | onExpandAll | () | this | 展开所有项后执行 |
| collapseAll | onCollapseAll | () | this | 折叠所有项后执行 |
| select | onSelect | (item) | this | 选中一项后执行 |
| updateCont | onUpdateContent | (data) | AsyncFunction | 更新参数content后执行 |
内置变量
| 变量名 | 值类型 | 默认值 | 说明 |
|---|---|---|---|
| flatData | array | [] | 一维数组数据 |
| treeData | array | [] | 多维树数组数据 |
| lastExpanded | number | -1 | 最后的展开项id |
| treeDataOrig | array | [] | 原始树数组数据，是treeData和flatData的基础 |
内置方法
| 方法名 | 返回值 | 说明 |
|---|---|---|
| active(items[,cb]) | this | 激活节点，items可以为单值也可为数组 |
| select(item[,cb]) | this | 选中终极节点，item为单值 |
| unselect(item[,cb]) | this | 不选中终极节点，item为单值 |
| expand(item[,cb]) | AsyncFunction(this) | 展开父节点，item为单值 |
| expandAll([cb]) | this | 展开所有父节点，multiple=true下有效 |
| collapse(item[,cb]) | AsyncFunction(this) | 折叠父节点，item为单值 |
| collapseAll([cb]) | this | 折叠所有父节点 |
| disable(items[,cb]) | this | 禁用节点，items可以为单值也可为数组 |
| disableAll([cb]) | this | 禁用所有节点 |
| enable(items[,cb]) | this | 启用节点，items可以为单值也可为数组 |
| enableAll([cb]) | this | 启用所有节点 |
| add({data[,target,isChild,brother,isFront,repeat,cb]}) | AsyncFunction(this) | 添加一个或多个节点，data可为单值或数组 |
| edit(item,data[,cb]) | AsyncFunction(this) | 编辑一个节点，item为目标节点，data为编辑数据 |
| remove(data[,cb]) | AsyncFunction(this) | 删除一个或多个节点，data可为单值或数组 |
| graft({source[,target,isFront,isChild,cb] }) | AsyncFunction(this) | 移动一个节点 |
公共参数
本框架的模块采用相同的方式编写，所以通常有同名的公共参数，详细请点击这里。
公共事件
本框架的模块采用相同的方式编写，所以通常有同名的公共事件，详细请点击这里。
公共变量
本框架的模块采用相同的方式编写，所以通常有同名的公共变量，详细请点击这里。
公共方法
本框架的模块采用相同的方式编写，所以通常有同名的公共方法，详细请点击这里。
示例操作
通过一个示例演示：active、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.add({data:'青海省'}); } opRemove.onclick = () => { opIns.remove(0); } opEdit.onclick = () => { opIns.edit({item:7,data:{label:'上海市被修改了'}}); } opData.onclick = () => { console.log(opIns.flatData); console.log(opIns.treeData); } opIns.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) })
