tree-graph-vue
1.0.6 • Public • Published ████████╗██████╗ ███████╗███████╗ ██████╗ ██████╗ █████╗ ██████╗ ██╗ ██╗
╚══██╔══╝██╔══██╗██╔════╝██╔════╝ ██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║ ██║
██║ ██████╔╝█████╗ █████╗█████╗██║ ███╗██████╔╝███████║██████╔╝███████║
██║ ██╔══██╗██╔══╝ ██╔══╝╚════╝██║ ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║
██║ ██║ ██║███████╗███████╗ ╚██████╔╝██║ ██║██║ ██║██║ ██║ ██║
╚═╝ ╚═╝ ╚═╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝
tree-graph-vue
vue 樹狀思維導圖組件 Dendrogram Component
編譯 Build Setup
yarn install
yarn dev
yarn build
安裝 Install
yarn add tree-graph-vue
用法 Usage
<template>
<div id="app">
<h3>多列視圖</h3>
<tree :nodes="nodes" :startId="nodes[0].id" />
<h3>單列視圖</h3>
<tree-single :nodes="nodes" :startId="nodes[0].id" />
</div>
</template>
import TreeGraph from "tree-graph-vue";
Vue.use(TreeGraph);
操作
| 操作 |
按鍵 |
| 新增子節點 |
Tab |
| 新增兄弟節點 |
Enter |
| 刪除節點 |
Delete |
| 保存樹（file 模式） |
Command/Ctrl + S |
組件屬性
| 屬性 |
說明 |
類型 |
是否必須 |
默認值 |
| nodes |
節點 |
Array |
是 |
- |
| startId |
根節點 id |
String |
是 |
- |
| singleColumn |
是否是單列視圖 |
Boolean |
否 |
false |
| uncontrolled |
是否為非受控組件 |
Boolean |
否 |
true |
| ITEM_HEIGHT |
節點元素高度 |
Number |
否 |
50 |
| BLOCK_HEIGHT |
節點塊高度 |
Number |
否 |
30 |
| FONT_SIZE |
節點字體大小 |
Number |
否 |
14 |
| INDENT |
縮進 |
Number |
否 |
25 |
| AVATAR_WIDTH |
頭像寬度 |
Number |
否 |
22 |
| CHECK_BOX_WIDTH |
勾選框寬度 |
Number |
否 |
18 |
| handleClickNode |
點擊節點事件 |
Function |
否 |
- |
| handleClickDot |
點擊收起/展開事件 |
Function |
否 |
- |
| handleCheck |
點擊勾選框事件 |
Function |
否 |
- |
| handleChangeNodeText |
更改節點名事件 |
Function |
否 |
- |
| handleAddNext |
向後添加兄弟節點事件 |
Function |
否 |
- |
| handleAddChild |
添加子節點事件 |
Function |
否 |
- |
| handleDeleteNode |
刪除節點事件 |
Function |
否 |
- |
| handleSave |
保存樹 |
Function |
否 |
- |
節點屬性
| 屬性 |
說明 |
類型 |
| id |
節點 id |
String |
| text |
節點文本 |
String |
| fatherId |
父節點 id |
String |
| children |
子節點 id |
Array |
| contract |
是否收起子節點 |
Boolean |
| showAvatar |
是否顯示頭像 |
Boolean |
| avatarUri |
頭像地址 |
String |
| showCheckbox |
是否顯示勾選框 |
Boolean |
| checked |
是否勾選 |
Boolean |
| showStatus |
是否顯示節點狀態 |
Boolean |
| hour |
節點（任務）工時 |
Number |
| limitDay |
節點（任務）剩余天數 |
Number |
Package Sidebar
Install
Weekly Downloads