Vue.js 2的可检查文件夹树组件 - v-folder

Vue.js 2的可检查文件夹树组件 - v-folder
插件名称 v-folder
发布时间 2020年12月10日
插件作者 v-comp

一个简单的Vue.js 2组件,用于渲染带有复选框的可折叠文件夹/目录树。

安装和下载:

# Yarn
$ yarn add v-folder

# NPM
$ npm install v-folder --save

演示

您可以运行npm run dev本地预览。

有关项目集成,请参见以下配置:

import VFolder from 'v-folder';
Vue.use(VFolder);

new Vue({
  el: '#app',
  template: `
      <v-folder :data="data" :ajax="ajax" :conf="conf" @change="onChange"></v-folder>
  `,
  data() {
    return {
      uid: 0,
      conf: {
        // tree node name
        node: 'sourceDir',
        // KEY NAME of dirs/branches/parents etc.. .
        branch: 'dirs',
        // KEY NAME of  files/leafs/children etc...
        leaf: 'files'
      },
      data: {
        // root
        sourceDir: 'C:/Users',
        // children
        files: [],
        dirs: []
      },
      // ajax settings
      ajax: {
        method: 'GET',
        url: 'http://localhost:1234',
        params: {},
        data: {},
        headers: {},
        // params key of path
        pathAs: 'path',
        // process response data
        process: (res) => res.data
      }
    };
  },
  methods: {
    onChange(result) {
      console.log(result);
    }
  }
});