tree-nodes-dl
v0.3.2
Published
<img src="https://img.shields.io/github/repo-size/josejuan81/tree-nodes-dl"> <img src="https://img.shields.io/npm/dm/tree-nodes-dl"> <img src="https://img.shields.io/npm/v/tree-nodes-dl">
Downloads
19
Maintainers
Readme
tree-nodes-dl
code Pen
https://codepen.io/JOSEJUAN/pen/jOWBreV?editors=1101
Install
npm install tree-nodes-dl
Use
global use
import Vue from 'vue';
import treeNodesDl from 'tree-nodes-dl';
Vue.use(treeNodesDl);
local use
import treeNodes from 'tree-nodes-dl';
...
export default {
components: {
treeNodes,
}
}
html
<template>
<tree-nodes-dl
class="tree-container"
children=inner
text=title
:indent="15"
:nodes="treeData"
v-slot="{ node, isOpen }"
>
<div class="slot-node">
<span v-if="!isOpen && node.inner">+</span>
<span v-if="isOpen && node.inner">-</span>
<h2
:class="{'lm': !node.inner }"
>Desde slot: {{node.title}}</h2>
<button
type="button"
@click.stop
>click me!</button>
</div>
</tree-nodes-dl>
</template>
<script>
import treeNodes from 'tree-nodes-dl';
function data() {
return {
treeData: [
{
title: "A",
otherProp: false,
inner: [
{
title: "A.1",
inner: [
{
title: "A.1.1"
}
]
},
{
title: "A.2",
inner: [
{
title: "A.2.1"
},
{
title: "A.2.2"
}
]
},
{
title: "A.3",
inner: [
{
title: "A.3.1"
}
]
},
{
title: "A.4",
inner: [
{
title: "A.4.1"
}
]
}
]
},
{
title: "B",
inner: [
{
title: "B.1",
inner: [
{
title: "B.1.1"
},
{
title: "B.1.2"
}
]
},
{
title: "B.2",
inner: [
{
title: "B.2.1"
}
]
},
{
title: "B.3",
inner: [
{
title: "B.3.1"
}
]
},
{
title: "B.4",
inner: [
{
title: "B.4.1"
}
]
}
]
},
{
title: "C"
},
{
title: "D"
}
],
}
}
export default {
components: {
treeNodes,
},
data,
}
</script>
.slot-node {
align-items: center;
cursor: default;
display: flex;
span {
font-weight: bold;
font-size: 20px;
height: 20px;
margin-right: 10px;
width: 20px;
}
h2 {
width: 100%;
&.lm {
margin-left: 30px;
}
}
button {
cursor:pointer;
width: 10%;
}
}
Slot - scoped
|name | type | observation
|-|-|-|
node
| Object | Element of the array
isOpen
| Boolean
| true
: node open. false
node collapsed
Note: you can use event handlers like
click
in de slot but this will change the node state (collapsed or opened). If you don't want this behavior just addstop
as modifier in theevent
(@click.stop="clickHandler") orstopPropagation()
(function clickHandler(e, node, isOpen) { e.stopPropagation()...})
Classes
name | Observation |
--|--|
.node-container-wrapper
| This is the main class
and it's wrapping the node
. You can access the node
through this class.
collapsing
| This is de vue transition name. You can use it to apply custom transitions for collaping the node
.node
| This is the node class.
Note: If you want more details please check here.