Package Exports

vue3-organization-chart
vue3-organization-chart/dist/orgchart.umd.min.js

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-organization-chart) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Foreword

First of all, thank you very much for the excellent work of dabeng. I'm just adding my sauce to move the project to Vue3
It work's with VueJS 3 !

Installation

npm install vue3-organization-chart --save

Demos

Since codesandbox and jsfiddle can't get vue3 to work properly. I am currently developing a doc.

Usage

<template>
  <div>
    <organization-chart :datasource="ds"></organization-chart>
  </div>
</template>

<script>
  import OrganizationChart from 'vue3-organization-chart'
  import 'vue3-organization-chart/dist/orgchart.css'
  export default {
    components: {
      OrganizationChart
    },
    data () {
      return {
        ds: {
          'id': '1',
          'name': 'Lao Lao',
          'title': 'general manager',
          'children': [
            { 'id': '2', 'name': 'Bo Miao', 'title': 'department manager' },
            { 'id': '3', 'name': 'Su Miao', 'title': 'department manager',
              'children': [
                { 'id': '4', 'name': 'Tie Hua', 'title': 'senior engineer' },
                { 'id': '5', 'name': 'Hei Hei', 'title': 'senior engineer',
                  'children': [
                    { 'id': '6', 'name': 'Pang Pang', 'title': 'engineer' },
                    { 'id': '7', 'name': 'Xiang Xiang', 'title': 'UE engineer' }
                  ]
                 }
               ]
             },
            { 'id': '8', 'name': 'Hong Miao', 'title': 'department manager' },
            { 'id': '9', 'name': 'Chun Miao', 'title': 'department manager' }
          ]
        }
      }
    }
  }
</script>

Attributes

Name	Type	Required	Default	Description
datasource	json	yes		datasource usded to build out structure of orgchart. It could be a json object.
pan	boolean	no	false	Users could pan the orgchart by mouse drag&drop if they enable this attribute.
zoom	boolean	no	false	Users could zoomin/zoomout the orgchart by mouse wheel if they enable this attribute.
zoomin-limit	number	no	7	Users are allowed to set a zoom-in limit.
zoomout-limit	number	no	0.5	Users are allowed to set a zoom-out limit.

Events

Name	Parameters	Description
node-click	node data	triggers when user clicks the node.

Scoped Slots

<template slot-scope="{ nodeData }">  
 <!-- feel free to customize the internal structure of node --></template>

Author

👤 Augustin Ribreau

Website: https://augustinribreau.com/
GitHub: @augustinribreau