@a06062125
2017-08-21T17:10:27.000000Z
字数 1095
阅读 335
| 概念描述 | 类名 | 类型 | 备注 |
|---|---|---|---|
| 菜单的根容器 | menu-root | Dom-Element | |
| 子菜单 | menu-submenu | Dom-Element | 在菜单项内部的菜单列表 |
| 菜单项 | menu-item | Dom-Element | 不同的交互行为 |
| 菜单根容器折叠状态 | menu-fold | Boolean | |
| 菜单项打开收缩状态 | menu-opened | Boolean | |
| 子菜单的显示隐藏状态 | menu-hidden | Boolean | |
| 菜单项的选中状态 | menu-selected | Boolean | 标志当前路径 |
叶结点： 没有子菜单的菜单项
选中路径： 取决于当前的访问路径， 当前访问路径的path为选中路径
展开折叠， menu-fold: [true|false]， 影响菜单容器宽度、子菜单的定位状态， 子菜单显示隐藏的触发事件
menu-root
展开menu-fold: false |
折叠menu-fold: true |
|---|---|
| 菜单容器宽度 | 200px |
| 子菜单显示位置 | 二级子菜单在根容器区域内显示， 三级子菜单在容器区域外显示 |
| 子菜单显示隐藏的触发事件 | 点击一级子菜单， toggle一级子菜单的打开收缩状态， 级联影响二级子菜单的显示隐藏状态; hover二级子菜单， 三级子菜单显示在二级子菜单右侧；二级子菜单blur时， 三级子菜单隐藏 |
打开收缩， menu-opened: [true|false]，
仅适用于菜单根容器为展开状态( menu-fold: false)时的一级子菜单
显示隐藏， menu-hidden: [true|false]
选中， menu-selected: [true|false]
选中路径中最低层的处于显示状态的菜单项为选中状态
只有叶结点 (没有子菜单的菜单项 )才可以触发具体的路由变化
location中的路由不匹配任何叶节点的路由时
props
state