Open verilog15 opened 5 years ago
Hi @verilog15 , I just released 1.0 version of vue-organization-chart on npmjs.com. I think it will be a good start point though current component only can render the orgchart without too much options which jquery orgchart plugin has exposed. Additionally, feel free to play around with Demo on CodeSandbox and tell me your interesting ideas 😊
Hi @dabeng, That is so great! You don't have an idea how much I waited for a good Vue library which deals with orgchars. I was using your JQuery project with my Vue wrapper. I will be more than glad to replace it with your Vue project. Which JQuery options I can use for now? The main options which I would like to use are:
All those features are available on the JQuery project. Is it possible to create those options on this project? Also is there a table with all available options which I can use? (like the one you have in the JQuery project).
Thank you again for all your hard work!
Hi @verilog15 . I'm glad that vue-organization-chart could be introduced into your new Vue project 😊 . I added zoom option just now and will expose more option according to the APIs of jquery orgchart in the feature.
Hi @dabeng, I started using your project :) How can I use those features I mentioned above? Only zoom works for me, for now (I used "datasource").
@dabeng Any good news for us? :)
Look forward to your good news,happy new year
Happy spring festival 😊
Hi @verilog15 @chaoYrAx. I have to say sorry. For various reasons, I only spared two days to update vue-orgchart during my Chinese New Year holiday. For now, there is the following available attributes and slot and you can find some new Demos on codesandbox.io.
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. |
<template slot-scope="{ nodeData }">
<!-- feel free to customize the internal structure of node -->
</template>
Hi @dabeng - thanks for this great library!
Any idea if you'll be able to add the direction and createNode attributes?
Good luck with your new project! Can you provide a schedule for the project? I was waiting a long time to use org chart with Vue. Thank you!