组件用.vue还是.js_Vue.js树组件

组件用.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" />

翻译自: https://vuejsexamples.com/a-vuejs-tree-component/

组件用.vue还是.js