Antd & Draggable 文件资源管理器（一）

涉及功能

可以用作各式办公文件的存放

迅速检索 / 拖拽排序 / 固定排序

LIST / TABLE 切换

鼠标右按键响应菜单 / 焦点事件

a. 打开
b. 重命名弹框
c. 移动弹框
d. 排序
e. 删除

鼠标左按键焦点事件 / 双击事件 / 排序事件

面包屑 / 面包屑下拉菜单 / 记录

新增文件夹 / 新增文件

主题部分结构

        <ul class="container" v-show="this.conversionList">
            <draggable @update="datadragEnd" :move="move" :list="list">
                <transition-group>
                    <li v-for="item in list" :key="item.key">
                        <a-dropdown :trigger="['contextmenu']">
                            <div @click="options(item.key)" @dblclick="folder(item.childrenId != undefined ? item.childrenId : item.src , item.childrenId != undefined ? 'childrenId' : 'src')" @contextmenu.prevent="mouseclick(item.key)" :class="active==item.key ? 'activeClass' : '' ">
                                <h3>
                                    <a-icon :type="item.type == 'folder' ? 'folder' : 'file'" theme="twoTone"/>
                                </h3>
                                <p>{{item.name}}</p>
                            </div>
                            <a-menu slot="overlay">
                                <a-menu-item key="1" @click="openfolder()">
                                    OPEN
                                </a-menu-item>
                                <a-menu-item key="2" @click="openRenamed(item.title , item.key)">
                                    RENAMED
                                </a-menu-item>
                                <a-menu-item key="3">
                                    MOVING
                                </a-menu-item>
                                <a-menu-item key="4" @click="showConfirm(item.key)">
                                    DELETE
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </li>
                </transition-group>
            </draggable>
        </ul>

<div @click="options(item.key)" @dblclick="folder(item.childrenId != undefined ? item.childrenId : item.src , item.childrenId != undefined ? 'childrenId' : 'src')" @contextmenu.prevent="mouseclick(item.key)" :class="active==item.key ? 'activeClass' : '' ">

@click="options(item.key)"

左键焦点事件

@dblclick="folder(item.childrenId != undefined ? item.childrenId : item.src , item.childrenId != undefined ? 'childrenId' : 'src')"

双击事件
因为双击即进入文件夹或打开文件，此处传值做了三元运算判定双击文件类型
第一个值

item.childrenId != undefined ? item.childrenId : item.src
子文件夹是否存在？存在传入ID ：不存在传入文件SRC

item.childrenId != undefined ? 'childrenId' : 'src')"
子文件夹是否存在？存在传入文件夹类型：不存在传入文件类型

@contextmenu.prevent="mouseclick(item.key)"

鼠标右键焦点事件，并做冒泡处理

:class="active==item.key ? 'activeClass' : '' "

焦点样式处理

改名弹框

        <a-modal v-model="renamed" :title="folderName.name" on-ok="handleOk">
            <template slot="footer">
                <a-button key="back" @click="handleCancel">
                    Return
                </a-button>
                <a-button key="submit" type="primary" :loading="loading" @click="FolderNameUpload(folderName.id)">
                    Submit
                </a-button>
            </template>
            <h3 class="title">Please enter the name to be modified</h3>
            <input class="renamed" type="text" v-model="newName" >
        </a-modal>

Antd & Draggable 文件资源管理器 （一）

涉及功能

主题部分结构

改名弹框

Antd & Draggable 文件资源管理器（一）