像树组件一样的OS X Finder – vue-finder

像树组件一样的OS X Finder – vue-finder
插件名称 vue-finder
发布时间 2020年9月4日
插件作者 jledentu

vue-finder是一个Vue.js组件,可呈现OS X Find应用程序样式的界面,以像树一样展示您的分层数据(例如文件夹,文件等)。

安装和下载:

# NPM
$ npm install @jledentu/vue-finder --save

变更日志:

2020/09/02

  • v1.21.0

2020年5月14日

  • v1.12.0

更多功能:

  • 可拖动
  • 可过滤
  • 可订制
  • 主题化的

如何使用它:

1.导入组件并定义层次结构数据。

import { Finder } from "@jledentu/vue-finder";

export default {
  components: {
    Finder
  },
  data() {
    return {
      tree: {
        id: "root",
        children: [
          {
            id: "child1",
            label: "Child 1",
            children: [
              { 
                id: "Child11", 
                label: "Child 1.1" 
              }
            ]
          },
          {
            id: "child2",
            label: "Child 2"
          },
          {
            id: "child3",
            label: "Child 3"
          }
        ]
      }
    };
  }
};

2.将组件插入模板。

<template>
  <div>
    <Finder :tree="tree"></Finder>
  </div>
</template>