Package Exports

vue3-blocks-tree

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-blocks-tree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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


<template>
    <h1>Basic</h1>
    <div>
        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true"></blocks-tree>
    </div>

    <h1>With slots</h1>
    <div>
        <blocks-tree :data="treeData" :horizontal="treeOrientation=='1'" :collapsable="true">
        <template #node="{data,context}">
            <span>
                <input type="checkbox" :checked="selected.indexOf(data.some_id)> -1" @change="(e)=>toggleSelect(data,e.target.checked)"/> {{data.label}}
            </span>
            <br/>
            <span v-if="data.children && data.children.length">
                <a href="#" @click="context.toggleExpand">toggle expand</a>
            </span>
        </template>
        </blocks-tree>
        <div>
        Selected: {{selected}}
        </div>
    </div>

    <h1>Change orientation</h1>
    <select v-model="treeOrientation">
        <option value="0">Vertical</option>
        <option value="1">Horizontal</option>
    </select>

</template>
<script>
import { defineComponent,ref,reactive } from 'vue';

export default defineComponent({

    setup() {

        let selected = ref([]);
        let treeOrientation = ref("0");
        let treeData = reactive({
            label: 'root',
            expand: true,
            some_id: 1,
            children: [
                { label: 'child 1', some_id: 2, },
                { label: 'child 2', some_id: 3, },
                { 
                    label: 'subparent 1', 
                    some_id: 4, 
                    expand: false, 
                    children: [
                        { label: 'subchild 1', some_id: 5 },
                        {  
                            label: 'subchild 2', 
                            some_id: 6, 
                            expand: false, 
                            children: [
                                { label: 'subchild 11', some_id: 7 },
                                { label: 'subchild 22', some_id: 8 },
                            ]
                        },
                    ]
                },
            ]
        });

        const toggleSelect = (node, isSelected) => {
            isSelected ? selected.value.push(node.some_id) : selected.value.splice(selected.value.indexOf(node.some_id), 1);
            if(node.children && node.children.length) {
                node.children.forEach(ch=>{
                    toggleSelect(ch,isSelected)
                })
            }
        }

        return {
            treeData,
            selected,
            toggleSelect,
            treeOrientation
        }
    }
})

</script>

NPM

# use npm
npm i vue3-blocks-tree

# use yarn
yarn add vue3-blocks-tree

Import Plugins

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';
createApp(App).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'}`
labelWidth	node label width	`String` \| `Number`	`auto`
collapsable	children node is collapsable	`Boolean`	`true`
renderContent	how to render node label	`Function`	-
labelClassName	node label class	`Function` \| `String`	-

events

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`