1.2.0 • Published 5 years ago
vue2-draggable-tree v1.2.0
vue2-draggable-tree
A simple organization draggable tree chart based on Vue2.x
NPM
# use npm
npm i vue2-draggable-tree
# use yarn
yarn add vue2-draggable-treeImport Plugins
import Vue from "vue";
import Vue2DraggableTree from "vue2-draggable-tree";
import "vue2-draggable-tree/dist/style.css"
Vue.use(Vue2DraggableTree);
// ...API
props
| prop | descripton | type | default |
|---|---|---|---|
| data | Array | ||
| defaultProps | configure props | Object | {label: 'label', children: 'children', id: 'id'} |
| allowDrag | Judging which node can be dragged | Boolean | true |
| horizontal | layout is horizontal | Boolean | false |
| collapsable | children node is collapsable | Boolean | false |
| expandAll | children node is collapsable, and expand all | Boolean | false |
| labelClassName | node label class | Function | String | - |
| hoverClassName | node label hover class | Function | String | - |
| selectedClassName | The className of the selected node | Function | String | - |
events
| event name | descripton | type |
|---|---|---|
| node-click | Tell you which node was clicked | Function |
| node-mouse-over | onMouseOver event | Function |
| node-mouse-out | onMouseOut event | Function |
Call events
node-click
well be called when the node-label clicked
- params
modelnode data was clicked - params
componentVNode data for the node was clicked
Example
default
horizontal
Browser support
Use Flexible Box Layout!
IE9+、Chrome、Firefox、Opera