npm install lit-finder
<template>
<div>
<finder
:tree="tree"
:handleItemClick="handleItemClick"
>
<template v-slot:finder-file-detail="{data}">
{{data.label}}
</template>
</finder>
</div>
</template>
<script>
import Finder from 'lit-finder';
export default {
components: {Finder},
data: () => ({
tree: [
{
label: 'Parent 01',
type: 'folder',
children: [
{label: 'Parent 01 - Child 1', syncData: true, type: 'folder'},
{label: 'Parent 01 - Child 2', type: 'file'},
],
suffix: 10
},
{
label: 'Parent 02',
type: 'folder',
children: [
{label: 'Parent 01 - Child 1', type: 'file'},
{label: 'Parent 01 - Child 2', type: 'file'},
]
},
]
}),
methods: {
async handleItemClick(nodeData) {
// do something, return Promise
return Promise.resolve([
{
label: 'New node 01'
},
{
label: 'New node 02'
}
])
}
}
}
</script>
Name | Type | Default | |
---|---|---|---|
tree | Array | [] | Base data of finder. Array of node |
handleItemClick | Function | null | Handle event when click on node(have two params includes: nodeData, options) |
options | Object | {} | Init finder options(detail below) |
Key | Type | Default value | |
---|---|---|---|
label | String | required | Name of node |
type | String | require | folder,file: show node with type file or folder and css |
children | Array | [] | Children node |
suffix | String,Number | '' | suffix content |
syncData | Boolean | false | if true: define handleItemClick function to handle |
suffixClass | String | '' | style for suffix content |
Key | Type | Default value | |
---|---|---|---|
recursiveAll | Boolean | false | Expand all nodes. |
suffixClass | String | '' | Class of suffix content(When node have suffix options). |
handleItemClick | Function | null | Handle event when click into node |
containerClass | String | '' | Extra class of finder container |
wrapperClass | String | '' | Custom wrapper class |
<template>
<finder
...
ref="finder"
>
</finder>
</template>
<script>
export default {
// ...,
data: () => ({
keyword: ''
}),
methods: {
someHandle() {
// call something to get data
const data = [
{
label: 'Parent 01',
type: 'folder',
children: [
{label: 'Parent 01 - Child 1', syncData: true, type: 'folder'},
{label: 'Parent 01 - Child 2', type: 'file'},
],
suffix: 10
}
]
/** render with keyword */
this.$refs.finder.reRender(data, {
keyword: this.keyword,
noData: 'No data specific' // you can use node element instead string
// highlightFile: true,
// highlightFolder: false,
})
}
}
}
</script>
- Rerender options:
Key | Type | Default value | Explain |
---|---|---|---|
keyword | String | '' | highlight name file or folder match which match keyword |
noData | String, Node Element | 'No data specific!' | Show message no data when the finder have no data |
highlightFile | Boolean | true | default highlight word inside file name which match keyword |
highlighFolder | Boolean | false | highlight folder name like the way highlightFile works |