import Vue from 'vue';
import FileSystem from 'iosish-file-system'
Vue.use(FileSystem, {
// 操作集的修改写法具体见operation.js 但是不要修改打开及重命名的写法
configOperations: (operations) => {
// 多选时右键的操作集
operations.genMenuDocuments = (targets, context) => {
const target = targets[0];
return [
{
title: '打开',
action: (function(){
this.$emit('openPath', target);
}).bind(context),
},
....
};
// 单选时右键的操作集
operations.genMenu = (targets, context) => {
const target = targets[0];
return [
{
title: '打开',
action: (function(){
this.$emit('openPath', target);
}).bind(context),
},
....
};
}
});<template>
<button @click="changemode">显示模式改变</button>
<toolbar />
<iosish-file-system :data="data" @api="onApiCalling">
<template v-slot:brief="{target}">
<div>{{target}}</div>
</template>
</iosish-file-system>
</template>
<script>
import { EventBus, Toolbar } from 'iosish-file-system'
export default {
components: {
'toolbar' :Toolbar,
},
data(){
return {
data: []
}
},
methods: {
onApiCalling(payload){
console.log(payload)
EventBus.setTarget(someTraget...)
},
changemode(){
EventBus.mode = EventBus.mode === 'tree' ? 'plain': 'tree';
},
requestData(){
setTimeout(() => {
// 直接操作原来的data就可以实现视图的改变
this.data[1].children[0].children.splice(0, 1);
console.log(this.data);
}, 200);
},
}
}
</script>[
{
"id": "6b95c72317c2bd650fb9dd43f0bf9b0d4270ee06",
"name":"文件夹",
"timestamp":1553325813294,
"ext":"folder",
"children":[
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"name":"文件1",
"timestamp":1553325813294,
"size":1024,
"ext":"png",
"src_small": "xxxxxxxx",
"src_mid": "yyyyyyyyyyyyy",
"src_big": "zzzzzzzzzzzzzzz",
"path":"文件夹/文件1"
}
],
"path":"文件夹"
},
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"name":"集货宝",
"timestamp":1553325813294,
"ext":"folder",
"children":[
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"name":"东南角",
"timestamp":1553325813294,
"ext":"folder",
"children":[
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"name":"东南角的照片1",
"timestamp":1553325813294,
"size":1024,
"ext":"png",
"src_small": "xxxxxxxx",
"src_mid": "yyyyyyyyyyyyy",
"src_big": "zzzzzzzzzzzzzzz",
"path":"集货宝/东南角/东南角的照片1"
},
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"name":"东南角的照片2",
"timestamp":1553325813294,
"size":1024,
"src_small": "xxxxxxxx",
"src_mid": "yyyyyyyyyyyyy",
"src_big": "zzzzzzzzzzzzzzz",
"ext":"png",
"path":"集货宝/东南角/东南角的照片2"
},
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"name":"东南角的照片3",
"timestamp":1553325813294,
"size":1024,
"src_small": "xxxxxxxx",
"src_mid": "yyyyyyyyyyyyy",
"src_big": "zzzzzzzzzzzzzzz",
"ext":"png",
"path":"集货宝/东南角/东南角的照片3"
}
],
"path":"集货宝/东南角"
}
],
"path":"集货宝"
}
]-
获取文件树的总接口 返回总文件结构
-
获取不同类型的快捷链接接口 返回单个文件的结构
[
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"ext":"folder",
"name":"文件夹",
"path":"文件夹",
"timestamp":1553325813294,
"size":1024
},
{
"id": "a7c9fbf50a2519b4de53974fa188c01ee9663f9e",
"ext":"png",
"name":"东南角的照片1",
"path":"集货宝/东南角/东南角的照片1",
"src_small": "xxxxxxxx",
"src_mid": "yyyyyyyyyyyyy",
"src_big": "zzzzzzzzzzzzzzz",
"timestamp":1553325813294,
"size":1024
}
...]- 抛出的钩子 监听body中抛出的api事件，payload中包含了目标集合及事件类型，具体可以看App.vue中的用法