Tree树型菜单组件

2024-09-28 23:52:33首发，6天前更新

ax-tree组件可创建多层次的树菜单，支持分页和缓加载。

简单使用

ax-tree为本框架的自定义树组件，对ul+li或ol+li结构的容器节点使用ax-tree标签即可。

使用完整的结构树(属性)

可以像tree模块那样使用完整的树结构。

使用完整的结构树(子节点)

另外一种完整结构树的写法是将元素节点以rep属性的形式定义，可用的属性如下：

• rep=label，label节点，其textContent将作为label值
• rep=icon，icon节点，其class值将作为icon值
• rep=disk，圆形图片节点，其src值将作为disk值
• rep=cube，方形图片节点，其src值将作为cube值
• rep=tips，提示文字节点，其textContent将作为tips值
• rep=badge，徽章节点，其textContent将作为badge值
• rep=custom，用户自定义内容节点

注意，可以使用ax-badge自定义组件代替rep=badge。

另外，如有需要，可将brief节点写在第一个节点后面并且使用_tree-brief样式类。

Attributes属性

组件的属性与内置实例的参数是一致的，有三点需要注意：

1. 组件属性全部小写。
2. 属性值都是字符串格式。
3. 属性名如果是动宾结构，或者是由两个词组成的，那么中间使用短横分开，例如：模块参数contType（如果有），在组件属性写做cont-type；参数b4Init在属性中写做b4-init。

欲了解模块的参数详细，请点击这里。

Methods方法

除了组件通用的set、reset方法外，主要使用组件内置实例自身的方法，用法举例：elem.ins.update({})。

Events事件

由于本组件内置模块实例，所以组件的事件有两类：

1. 组件通用的set、reset、connected事件，用法举例：elem.on('connected',()=>{})。
2. 来自内置实例自身的事件，elem.ins指向内置实例，用法举例：elem.ins.on('initiated',()=>{})。