vue3-blocks-tree

> A simple organization structure tree view based on Vue3.x. It supports events, slots, horizontal vision and nodes manipulation

Thanks to hukaibaihu and his sources for vue 2 taken as basis.

Usage

``vue




`

$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`

Example

- default

!default

- horizontal

!horizontal

- use node slot

!horizontal

License

MIT