fun-tree

A folder tree project by vue

Document English / 中文

DEMO Live Demo

NPM

npm install --save fun-tree

Import

./main.js

import FunTree from 'fun-tree/dist/fun-tree.js'
import 'fun-tree/dist/fun-tree.css' // Optional
 
Vue.use(FunTree)

ES6

import FunTree from 'fun-tree/dist/fun-tree.js'
import 'fun-tree/dist/fun-tree.css' // Optional
 
components: {
  FunTree: FunTree,
},

If you want to customer css, you can not import fun-tree.css

Usage

Add a component inside your template
HTML

<FunTree :trees="yourTreeData"
         @clickEvent="myEvent()">
</FunTree>

Javascript

export default {
  name: "App",
    data() {
      return {
        trees: [
          { text: "Level1", selected: true },
          {
            text: "Level2",
            opened: true,
            children: [
              { text: "Level2-1", disabled: true },
              { text: "Level2-2", icon: "node-icon-music", selected: true },
              { text: "Level2-3", icon: "node-icon-word" },
            ],
          },
          {
            text: "Level3",
            opened: false,
            children: [
              { text: "Level3-1" },
              { text: "Level3-2", icon: "node-icon-excel" },
              { text: "Level3-3", icon: "node-icon-ppt", selected: true },
            ],
          },
        ],
      };
    },
    methods: {
      myEvent(node, actions, values) {
        console.log(node); // current node vue component
        console.log(actions); // do actions with current node
        console.log(values); // current node values  
      },
    }
}

Options

Name	Type	Default	Required	Description
trees	Array	[ ]	yes	trees data
clickEvent	Function	undefined	no	tree's node click event
checkboxShow	Boolean	true	no	set it show checkbox
checkboxAction	Boolean	true	no	set it checkbox action

Event

@clickEvent(node, actions, values)

node : current node vue component
actions : do actions with current node
values : current node values

Methods in actions

Method	Params	Description
addChild	(object) nodeData	add child with this node
removeChildren		remove this node's children
removeNode		remove this node
checked		set this node's selected true or false
open		set this node's opened = true
close		set this node's opened = false

Node data

Name	Type	Default	Required	Description
text	String	New Node	yes	set node show text
icon	String		no	icon class name
opened	Boolean	false	no	set node opened
selected	Boolean	false	no	set node selected
disabled	Boolean	false	no	set node disabled
children	Array	false	no	set node children

Default icon class

Image	Class Name
	node-icon-closed
	node-icon-open
	node-icon-disabled
	node-icon-not
	node-icon-danger
	node-icon-image
	node-icon-music
	node-icon-word
	node-icon-excel
	node-icon-ppt

Customer CSS Class

Class Name	Description
tree-node	Node
tree-content	Node content (checkbox, icon, text).
tree-content:hover	Node content hover
tree-button-unfold	Node unfold button.
tree-button-fold	Node fold button.
tree-button-none	Node button none.
tree-checkbox	Node checkbox default.
tree-checkbox:hover	Node checkbox hover.
tree-checkbox-checked	Node checkbox checked.
tree-word	Node word.

License

This is open-sourced software licensed under the MIT license.