https://github.com/jyoketsu/tree-graph-vue
vue Dendrogram Component
https://github.com/jyoketsu/tree-graph-vue
Last synced: 3 months ago
JSON representation
vue Dendrogram Component
- Host: GitHub
- URL: https://github.com/jyoketsu/tree-graph-vue
- Owner: jyoketsu
- Created: 2020-03-31T07:05:03.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-18T23:55:35.000Z (almost 4 years ago)
- Last Synced: 2025-02-10T13:15:55.546Z (11 months ago)
- Language: Vue
- Homepage: https://jyoketsu.github.io/tree-graph-vue/
- Size: 1.91 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```
████████╗██████╗ ███████╗███████╗ ██████╗ ██████╗ █████╗ ██████╗ ██╗ ██╗
╚══██╔══╝██╔══██╗██╔════╝██╔════╝ ██╔════╝ ██╔══██╗██╔══██╗██╔══██╗██║ ██║
██║ ██████╔╝█████╗ █████╗█████╗██║ ███╗██████╔╝███████║██████╔╝███████║
██║ ██╔══██╗██╔══╝ ██╔══╝╚════╝██║ ██║██╔══██╗██╔══██║██╔═══╝ ██╔══██║
██║ ██║ ██║███████╗███████╗ ╚██████╔╝██║ ██║██║ ██║██║ ██║ ██║
╚═╝ ╚═╝ ╚═╝╚══════╝╚══════╝ ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═╝
```
# tree-graph-vue
vue 樹狀思維導圖組件 Dendrogram Component
## [在線 DEMO OnlineDemo](https://jyoketsu.github.io/tree-graph-vue/)
## 編譯 Build Setup
```bash
# install dependencies
yarn install
# serve with hot reload at localhost:8080
yarn dev
# build for production with minification
yarn build
```
## 安裝 Install
```
yarn add tree-graph-vue
```
## 用法 Usage
```html
脑图
多列視圖 Multi Column
單列視圖 Single Column
```
```javascript
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 | 否 | - |
| handleDbClickNode | 雙擊節點事件 | Function | 否 | - |
| handleClickExpand | 點擊收起/展開事件 | Function | 否 | - |
| handleCheck | 點擊勾選框事件 | Function | 否 | - |
| handleChangeNodeText | 更改節點名事件 | Function | 否 | - |
| handleAddNext | 向後添加兄弟節點事件 | Function | 否 | - |
| handleAddChild | 添加子節點事件 | Function | 否 | - |
| handleDeleteNode | 刪除節點事件 | Function | 否 | - |
| handleSave | 保存樹 | Function | 否 | - |
| handleDrag | 拖拽节点 | 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 |