Skip to content

hommalex/vue-orgchart-al

Repository files navigation

This Repo is an improved copy of the what's below

A Vue wrapper for A vue component from OrgChart.js.

Travis Status npm

Intro

  • First of all, thanks a lot for dabeng's great work -- OrgChart.js
  • If you prefer the Vue.js Wrapper for Orgchart.js,you could try my project
  • This is just a update of spiritree work

Links

Feature

  • Support import and export JSON
  • Supports exporting chart as a picture
  • draggable Orgchart
  • Editable Orgchart

...

Install

npm install vue-orgchart-al -save

Quick Start

In main.js

import 'vue-orgchart-al/dist/style.min.css'

In *.vue

<template>
  <div>
    <vo-basic :data="chartData"></vo-basic>
  </div>
</template>

<script>
import { VoBasic } from 'vue-orgchart-al'
export default {
  components: { VoBasic }
  created () {
    this.chartData = {
      name: 'JavaScript',
        children: [
          { name: 'Angular' },
          {
            name: 'React',
            children: [{ name: 'Preact' }]
          },
          {
            name: 'Vue',
            children: [{ name: 'Moon' }]
          }
        ]
    }
}
</script>

Development

# install dependencies
npm install

# serve with hot reload at localhost:8999
npm run dev

# unit test
npm run test

# build by rollup
npm run rollup

License

MIT