Skip to content

A simple component for render tree diagram for Vue.js

Notifications You must be signed in to change notification settings

guisturdy/vue-tree-diagram

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-tree-diagram

A simple component for render tree diagram for Vue.js

Preview

Preview

view preview code

Install

npm install vue-tree-diagram

Example

Example (click to show)
<template>
  <tree-diagram :data="data" @node-click="handleNodeClick">
    <template v-slot:type-root="{value}">
      <div class="type-root">
        <h1>{{value.title}}</h1>
      </div>
    </template>
    <template v-slot:type-a="{value}">
      <div class="type-a">
        <h1>{{value.title}}</h1>
      </div>
    </template>
    <template v-slot:default="{value}">
      <div class="type-b">
        <h1>{{value.title}}</h1>
        <h2>{{value.subtitle}}</h2>
      </div>
    </template>
  </tree-diagram>
</template>

<script>
  import TreeDiagram from "vue-tree-diagram"
  export default {
    data() {
      return {
        components: { TreeDiagram },
        data: [
          {
            id: 1,
            type: "type-root",
            value: { title: "ROOT" },
            children: [{
              id: 2,
              type: "type-a",
              value: { title: "NodeA" },
              children: [{
                id: 3,
                type: "type-b",
                value: { title: "NodeB", subtitle: "NodeB subtitle" }
              }]
            }]
          }
        ]
      }
    },
    methods: {
      handleNodeClick(node) { 
        console.log(node)
      }
    }
  }
</script>

API

Attributes

Attribute Description Type Accepted Values Default
data tree data Array - -
nodePad space of node to node Number - 1
levelPad space of row to row Number - 10
direction tree direction String 't-b', 'l-r' 't-b'
align node align in each row String 'start', 'center', 'end' 'start'
direction picture description (click to show)
l-r t-b
l-r t-b
align picture description (click to show)
start center end
start center end

Events

Event Name Description Parameters
node-click triggers when a node is clicked (node, event)
before-render-tree triggers when start render tree -
after-render-tree triggers when tree render finished -

About

A simple component for render tree diagram for Vue.js

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published