组件用.vue还是.js
树成分 (tree-component)
A reactjs, angular and vuejs tree component.
reactjs,angular和vuejs树组件。
特征 (features)
vuejs component
vuejs组件
reactjs component
reactjs组件
angular component
角度分量
open and close
打开和关闭
select and deselect
选择和取消选择
disabled
残障人士
loading
装货
highlighted
突出显示
checkbox
复选框
custom icon or no icon
自定义图标或无图标
drag and drop
拖放
no dots
没有点
large and small
大大小小的
default and dark theme
默认和深色主题
contextmenu(vuejs and reactjs only)
contextmenu(仅vuejs和reactjs)
node id
节点编号
custom node(vuejs and reactjs only)
自定义节点(仅限vuejs和reactjs)
链接CSS (link css)
<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />
vuejs组件 (vuejs component)
npm i tree-vue-component
npm i tree-vue-component
import "tree-vue-component";
or
要么
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/vue-class-component/dist/vue-class-component.min.js"></script>
<script src="./node_modules/tree-vue-component/dist/tree-vue-component.min.js"></script>
<tree :data="data"
@toggle="toggle($event)"
@change="change($event)">
</tree>
the online demo: https://plantain-00.github.io/tree-component/packages/vue/demo
在线演示: https : //plantain-00.github.io/tree-component/packages/vue/demo
reactjs组件 (reactjs component)
npm i tree-react-component
npm i tree-react-component
import { Tree } from "tree-react-component";
or
要么
<script src="./node_modules/react/umd/react.production.min.js"></script>
<script src="./node_modules/react-dom/umd/react-dom.production.min.js"></script>
<script src="./node_modules/tree-react-component/dist/tree-react-component.min.js"></script>
<Tree data={data}
toggle={this.toggle}
change={this.change}>
</Tree>
the online demo: https://plantain-00.github.io/tree-component/packages/react/demo
在线演示: https : //plantain-00.github.io/tree-component/packages/react/demo
角度分量 (angular component)
npm i tree-angular-component
npm i tree-angular-component
import { TreeModule } from "tree-angular-component";
@NgModule({
imports: [BrowserModule, FormsModule, TreeModule],
declarations: [MainComponent],
bootstrap: [MainComponent],
})
class MainModule { }
<tree [data]="data"
(toggle)="toggle($event)"
(change)="change($event)">
</tree>
the online demo: https://plantain-00.github.io/tree-component/packages/angular/demo/jit
在线演示: https : //plantain-00.github.io/tree-component/packages/angular/demo/jit
the AOT online demo: https://plantain-00.github.io/tree-component/packages/angular/demo/aot
AOT在线演示: https : //plantain-00.github.io/tree-component/packages/angular/demo/aot
组件的属性和事件 (properties and events of the component)
name | type | description |
---|---|---|
data | TreeData[] | the data of the tree |
checkbox | boolean? | show checkbox for node |
draggable | boolean? | whether the node is draggable |
nodots | boolean? | the tree will have no dots |
size | string? | can also be "large", "small" |
theme | string? | can be "default"(the default theme), "dark" |
dropAllowed | (dropData: common.DropData) => boolean | optional, a function to show whether the drop action is allowed |
zindex | number? | z-index of contextmenu |
preid | string? | the node id prefix, eg: if preid = "test_" , then a node's id can be test_1-2-3 |
toggle | (eventData: EventData) => void | triggered when opening or closing a node |
change | (eventData: EventData) => void | triggered when selecting or deselecting a node |
drop | (dropData: DropData) => void | triggered when drag a node, then drop it |
名称 | 类型 | 描述 |
---|---|---|
数据 | TreeData [] | 树的数据 |
复选框 | 布尔值? | 显示节点复选框 |
可拖动的 | 布尔值? | 节点是否可拖动 |
零点 | 布尔值? | 树上将没有点 |
尺寸 | 串? | 也可以是“大”,“小” |
主题 | 串? | 可以是“默认”(默认主题),“暗” |
dropAllowed | (dropData:common.DropData)=>布尔值 | 可选,用于显示是否允许放置动作的函数 |
索引 | 数? | 上下文菜单的Z索引 |
前言 | 串? | 节点ID前缀,例如:如果preid = "test_" ,则节点的ID可以为test_1-2-3 |
拨动 | (eventData: EventData )=>无效 | 在打开或关闭节点时触发 |
更改 | (eventData: EventData )=>无效 | 在选择或取消选择节点时触发 |
下降 | (dropData: DropData )=>无效 | 拖动节点然后放下节点时触发 |
树数据结构 (tree data structure)
type TreeData<T = any> = {
text?: string;
value?: T; // anything attached to the node
icon?: string | false; // the icon class string, or no icon if is false
state: TreeNodeState;
children?: TreeData<T>[];
contextmenu?: string | Function; // the contextmenu component, props: (data: ContextMenuData<T>)
component?: string | Function; // the node component, props: (data: TreeData<T>)
};
type TreeNodeState = {
opened: boolean; // whether the node show its children
selected: boolean;
disabled: boolean; // disabled node can not be selected and deselected
loading: boolean; // show the loading icon, usually used when loading child nodes
highlighted: boolean;
openable: boolean; // can open or close even no children
dropPosition: DropPosition;
dropAllowed: boolean; // whether the drop action is allowed
};
enum DropPosition {
empty,
up,
inside,
down,
}
事件数据结构 (event data structure)
type EventData<T = any> = {
data: TreeData<T>; // the data of the node that triggered the event
path: number[]; // the index array of path from root to the node that triggered the event
};
删除数据结构 (drop data structure)
type DropData<T = any> = {
sourceData: TreeData<T>;
sourcePath: number[];
targetData: TreeData<T>;
targetPath: number[];
};
上下文菜单数据结构 (contextmenu data structure)
type ContextMenuData<T = any> = {
data: TreeData<T>;
path: number[];
root: TreeData<T>[];
parent?: any;
};
变更日志 (changelogs)
# v4
npm i tree-component
# v5
npm i tree-vue-component
npm i tree-react-component
npm i tree-angular-component
// v4
import "tree-component/vue";
import { Tree } from "tree-component/react";
import { TreeModule } from "tree-component/angular";
// v5
import "tree-vue-component";
import { Tree } from "tree-react-component";
import { TreeModule } from "tree-angular-component";
// v4
<link rel="stylesheet" href="./node_modules/tree-component/tree.min.css" />
// v5
<link rel="stylesheet" href="./node_modules/tree-component/dist/tree.min.css" />
// v3 angular AOT:
import { TreeModule } from "tree-component/angular";
// v4 angular AOT:
import { TreeModule } from "tree-component/aot/angular";
// v3
import "tree-component/vue";
import { TreeComponent, NodeComponent } from "tree-component/angular";
import { Tree } from "tree-component/react";
// v2
import "tree-component/dist/vue";
import { TreeComponent, NodeComponent } from "tree-component/dist/angular";
import { Tree } from "tree-component/dist/react";
// v2:
<link rel="stylesheet" href="./node_modules/tree-component/tree.min.css" />
// v1:
<link rel="stylesheet" href="./node_modules/jstree/dist/themes/default/style.min.css" />
组件用.vue还是.js