fun-tree v0.1.1

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

```js
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

Event

@clickEvent(node, actions, values)

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

Methods in actions

Node data

Default icon class

Customer CSS Class

License

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