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

安装和下载：

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

更多功能：

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

使用：

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>

3.所有默认props。

/**
 * 树的数据。
 */
tree: {
  type: Object,
  required: true
},
/**
 * 启用项目选择。
 */
selectable: {
  type: Boolean,
  default: false
},
/**
 * 启用项目的拖放。
 */
dragEnabled: {
  type: Boolean,
  default: false
},
/**
 * 用于筛选显示项的函数。
 */
filter: {
  type: Function,
  default: undefined
},
/**
 * 函数对显示的项进行排序。
 */
sortBy: {
  type: Function,
  default: undefined
},
/**
 * 加载时展开的项的ID。
 */
defaultExpanded: {
  type: String,
  default: undefined
},
/**
 * 用于呈现项的自定义组件。
 */
itemComponent: {
  type: [String, Object],
  default: undefined
},
/**
 * 样式设置选项。
 *
 * ```js
 * const theme = {
 *   primaryColor: '#2196f3',
 *   arrowColor: 'black',
 *   separatorColor: '#ccc',
 *   separatorWidth: '1px',
 *   dropZoneBgColor: 'rgba(33, 150, 243, 0.2)',
 *   draggedItemBgColor: 'rgba(33, 150, 243, 0.5)',
 * };
 * ```
 */
theme: {
  type: Object,
  default: () => ({})
},
/**
 * 滚动动画的持续时间（毫秒）。
 * 当项目展开时，查找器将滚动到右侧，
 * 使用动画。此参数定义此动画的持续时间。
 *
 * 设置“0”不显示动画。
 */
scrollAnimationDuration: {
  type: Number,
  default: 200
}

---

官网：https://github.com/jledentu/vue-finder

演示：https://www.vue365.cn/code_demo.php?id=277

GitHub下载：https://github.com/jledentu/vue-finder/archive/master.zip