vue-binary-tree

    1.1.1 • Public • Published

    English

    vue-binary-tree

    🌳 A vue2 component to display tree chart

    logo

    Install

    npm i vue-binary-tree --save
    

    Usage

    in template:

    <TreeChart :json="treeData" />
    

    in script:

    import TreeChart from "vue-binary-tree";
    
    export default {
    	components: {
        	TreeChart
    	},
    	data() {
    		return {
    			treeData: {
    				...
    			}
    		}
    	}
    	...
    

    Prop

    json

    Component data to support those field:

    - name[String] to display a node name
    - image_url[String] to display a node image
    - children[Array] node`s children
    - mate[Object] node`s mate
    - extend[Boolean] show/hide node`s children, default True
    

    Example:

      {
        name: 'root',
        image_url: "https://static.refined-x.com/avat.jpg",
        children: [
          {
            name: 'children1',
            image_url: "https://static.refined-x.com/avat1.jpg"
          },
          {
            name: 'children2',
            image_url: "https://static.refined-x.com/avat2.jpg",
            mate: {
              name: 'mate',
              image_url: "https://static.refined-x.com/avat3.jpg"
            },
            children: [
              {
                name: 'grandchild',
                image_url: "https://static.refined-x.com/avat.jpg"
              },
              {
                name: 'grandchild2',
                image_url: "https://static.refined-x.com/avat1.jpg"
              },
              {
                name: 'grandchild3',
                image_url: "https://static.refined-x.com/avat2.jpg"
              }
            ]
          },
          {
            name: 'children3',
            image_url: "https://static.refined-x.com/avat.jpg"
          }
        ]
      }
    

    Event

    click-node(node)

    Click on the node triggered, receive the current node data as a parameter

    Run a demo

    npm run serve
    

    Build

    npm run build-bundle

    Install

    npm i vue-binary-tree

    DownloadsWeekly Downloads

    4

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    1.02 MB

    Total Files

    16

    Last publish

    Collaborators

    • avatar