插件名称 | os-x-finder-tree |
---|---|
发布时间 | 2020年4月22日 |
插件作者 | jledentu |
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
}