1.2.0 • Published 3 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-tree
Import 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
model
node data was clicked
- params
component
VNode data for the node was clicked
Example
default
horizontal
Browser support
Use Flexible Box Layout!
IE9+、Chrome、Firefox、Opera