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.