0.0.1 • Published 4 years ago

foreo--hierarchy-tree v0.0.1

Weekly downloads
2
License
MIT
Repository
github
Last release
4 years ago

vue-org-tree

A simple organization tree chart based on Vue2.x

Usage

NPM

# use npm
npm i vue2-org-tree

# use yarn
yarn add vue2-org-tree

Import Plugins

import Vue from 'vue'
import Vue2OrgTree from 'vue2-org-tree'

Vue.use(Vue2OrgTree)

// ...

CDN

# css
<link href="https://unpkg.com/vue2-org-tree@1.1.0/dist/style.css">

<!--
...
-->

# js
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-org-tree@1.1.0/dist/index.js"></script>

API

  • props

propdescriptontypedefault
dataObject
propsconfigure propsObject{label: 'label', children: 'children', expand: 'expand'}
labelWidthnode label widthString | Numberauto
collapsablechildren node is collapsableBooleantrue
renderContenthow to render node labelFunction-
labelClassNamenode label classFunction | String-
selectedKeyThe key of the selected nodeString-
selectedClassNameThe className of the selected nodeFunction | String-
  • events

    event namedescriptontype
    clickClick eventFunction
    mouseoveronMouseOver eventFunction
    mouseoutonMouseOut eventFunction
  • Call events

on-expand

well be called when the collapse-btn clicked

  • params e Event
  • params data Current node data

on-node-click

well be called when the node-label clicked

  • params e Event
  • params data Current node data

on-node-mouseover

It is called when the mouse hovers over the label.

  • params e Event
  • params data Current node data

on-node-mouseout

It is called when the mouse leaves the label.

  • params e Event
  • params data Current node data

Example

  • default

    default

  • horizontal

    horizontal

Browser support

use table layout!

IE9+、Chrome、Firefox、Opera

License

MIT

IMPORTANT

This repository is a fork to add 2 events that was needed to improve the project I needed.

Any issues found, visit the original repository and report the issues.

0.0.1

4 years ago