A vue3 block organization tree view component. Hierarchical horizontal or vertical tree
npm install vue3-blocks-treevue
Basic
With slots
Change orientation
`
$3
[https://megafetis.github.io/vue3-blocks-tree-demo]
$3
`
use npm
npm i vue3-blocks-tree
use yarn
yarn add vue3-blocks-tree
`
$3
` js
import {createApp} from 'vue';
import VueBlocksTree from 'vue3-blocks-tree';
import 'vue3-blocks-tree/dist/vue3-blocks-tree.css';
// or import 'vue3-blocks-tree/src/styles/blocks-tree.less';
let defaultoptions = {treeName:'blocks-tree'}
createApp(App)
.use(VueBlocksTree,defaultoptions)
// or .component('blocks-tree',VueBlocksTree)
// ...
`
API
api | descripton | type
------------------|-------------------------------------------------------------|:---------------------------------------------------------------------
node context | Context to node manipulation in slot or in event callback | interface NodeContext { isExpanded():boolean; toggleExpand():void; }
#### props
prop | descripton | type | default
------------------|-----------------------------------------|:----------------------:|:---------------------------------------------------------:
data | | Object |
props | configure props | Object | {label: 'label', children: 'children', expand: 'expand',key: 'id'}
labelWidth | node label width | String \| Number | auto
collapsable | children node is collapsable | Boolean | true
renderContent | how to render node label | Function | -
nodeClassName | custom node class | Function \| String | -
labelClassName | node label class | Function \| String | -
$3
event name | descripton | type
------------------|-----------------------------------------|:----------------------
node-click | Click event | Function
node-mouseover | onMouseOver event | Function
node-mouseout | onMouseOut event | Function
node-expand | click expand button event | Function
$3
slot name | descripton | params
------------------|-----------------------------------------|:----------------------
node | current node scoped slot | data - node data, context - node context
#### node-expand
well be called when the collapse-btn clicked
- params e Event
- params data Current node data
- params context Node context
#### node-click
well be called when the node-label clicked
- params e Event
- params data Current node data
- params context Node context
#### node-mouseover
It is called when the mouse hovers over the label.
- params e Event
- params data Current node data
- params context Node context
#### node-mouseout
It is called when the mouse leaves the label.
- params e Event
- params data Current node data
- params context Node context`
