file-master

使用姿势

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":"集货宝"
    }
]

接口设置

1. 获取文件树的总接口 返回总文件结构

2. 获取不同类型的快捷链接接口 返回单个文件的结构

[
    {
        "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
    }
...]

3. 抛出的钩子 监听body中抛出的api事件，payload中包含了目标集合及事件类型，具体可以看App.vue中的用法