VUE仿windows⽂件夹⽂件
我在2019年的时候，曾经在⼀家⼯⼚，做过⼀个⽂件管理系统，当时有个界⾯效果是如下，采⽤的是jquery来写的,2年后，我⼜看到了这种，不过这并不是我写的，但不影响我去学习研究并对⽐，如下是现在VUE响应式的⽂件夹/⽂件前端效果
Rec 0002
功能：新增 移动 上传 删除 全选 重命名 查
所⽤技术 Vue+element
所⽤技术点
element的⾯包屑
element的分页
vue-simple-uploader⽂件多线程式上传
封装了图⽚组件
视频播放器vue-video-player
难度等级：中等
技术难度还好，主要是和后端约定好数据的设计，业务步骤，有了这些，再加上上⾯的插件，基本就没难度了。附上完整代码。
index.vue
<!--多媒体素材⾸页 -->
<template>
<div class="video-container">
<el-card shadow="hover">
<div class="video-header clearfix">
<div class="header-top">
<el-button :loading="uploadeFile_loading" type="primary" size="medium" @click="uploadeFile">
<i class="el-icon-upload2"></i>
<!-- 上传 -->
{{ $t('material.upload') }}
</el-button>
<!-- 新建⽂件夹 -->
<el-button type="primary" size="medium" @click="addFolder">
<i class="el-icon-plus"></i>
{{ $t('wFolder') }}
</el-button>
<!-- 重命名 -->
<el-button
v-show="activeFlag"
:
disabled="activeFlagNotReame"
type="primary"
size="medium"
@click="handleRenameFile"
>
<i class="el-icon-edit-outline"></i>
{{ $t('ame') }}
</el-button>
<!-- 移动到 -->
<el-button
v-show="activeFlag"
:disabled="activeFlagMoveble"
type="primary"
size="medium"
@click="moveFolder"
>
<i class="el-icon-rank"></i>
{{ $t('veTo') }}
</el-button>
<!-- 全选 -->
<el-button v-show="activeFlag" type="primary" size="medium" @click="toggleCheckAllSelect">
<i class="el-icon-check"></i>
{{ $t('material.selectAll') }}
</el-button>
<!-- 删除 -->
<!-- 删除 -->
<el-button v-show="activeFlag" size="medium" @click="handleDeleteFile">
<i class="el-icon-delete"></i>
{{ $t('material.delete') }}
</el-button>
<div class="fr">jquery弹出div窗口
<el-radio-group v-model="resType" @change="queryMaterialPage">
<!-- 全部 -->
<el-radio label="-1">{{ $t('material.all') }}</el-radio>
<!-- 图⽚ -->
<el-radio label="1">{{ $t('material.image') }}</el-radio>
<!-- 应⽤ -->
<el-radio label="98">{{ $t('programModel.apply') }}</el-radio>
</el-radio-group>
<el-input
v-model="keyWord"
:placeholder="$t('common.name')"
size="medium"
clearable
@clear="resetGetMaterialPage"
></el-input>
<!-- 查询 -->
<el-button size="medium" type="primary" icon="el-icon-search" @click="queryMaterialPage">{{ $t('material.search') }}</el-button> </div>
</div>
<div class="breadcrumb">
<!-- ⾯包屑 -->
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="(item,index) in breadcrumbList" :key="index">
<span
:class="(index === breadcrumbList.length-1) ? 'breadcrumb-link-active': ''"
class="breadcrumb-link"
@click="backFileFolder(item)"
>{{ item.name }}</span>
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</div>
<div
v-loading="loading"
class="video-main"
>
<ul class="list">
<li
v-for="(file,index) in files"
:key="index"
:class="{active:file.active}"
class="list-item"
@dblclick="dbClickOpenFile(file)"
>
<div class="inner">
<el-image
v-if="sType > 0"
:src="file.thumUrl ? file.thumUrl : defultThumUrl"
class="icon-thumb"
fit="contain"
alt
></el-image>
<i v-else class="icon-folder"></i>
<div v-show="sType > 0" class="hover-cover">
<span >{{ file.size | sizeFilter }}</span>
</div>
</div>
</div>
<i class="icon-file-selected" @click="toggleSelect(file,file.id)"></i>
<div class="file-name">
<span :title="file.name">{{ file.name }}</span>
</div>
</li>
</ul>
<!-- 分页 -->
<el-pagination
:
current-page="pageIndex"
:hide-on-single-page="true"
:page-sizes="[100, 200, 400, 600]"
:page-size="100"
:total="total"
layout="total, prev, pager, next, jumper"
@current-change="handleCurrentChange"
></el-pagination>
</div>
</el-card>
<!-- 重命名弹出框 -->
<el-dialog :title="$t('ame')" :visible.sync="renameDialogVisible" width="30%">
<el-form ref="renameForm" :model="renameForm" :rules="renameRules" >
<el-form-item prop="name">
<el-input v-model="renameForm.name" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button size="medium" @click="renameDialogVisible = false">{{ $t('common.cancel') }}</el-button>
<el-button :loading="rename_loading" type="primary" size="medium" @click="handleRenameConfirm">{{ $t('firm') }}</el-button> </div>
</el-dialog>
<!-- 上传组件 -->
<uploader-dialog :show.sync="showDialog" :upload-url="upfileUrl" :dir-id="parentId"></uploader-dialog>
<!-- 移动⽂件组件 -->
<move-file-dialog
:show.sync="moveFileDialog"
:ids="activeItems"
:parent-id="parentId"
@removeActiveItem="handleRemoveActiveItem"
></move-file-dialog>
<!-- 图⽚弹出放⼤组件 -->
<viewer-dialog
:show.sync="showImageDialog"
:src="imgSrc"
:img-title="imgTitle"
@closeImgDialog="imgDialogClose"
></viewer-dialog>
<!-- 视频播放组件 -->
<el-dialog :visible.sync="showlPlayVideo" :append-to-body="true" @close="closePlay">
<player :video-url="videoUrl" :state="state" :poster="poster"></player>
</el-dialog>
</div>
</template>
<script>
import Vue from 'vue'
// 引⼊上传⼦组件dialog
import uploaderDialog from './components/uploader-dialog'
// 引⼊移动⽂件⼦组件dialog
import moveFileDialog from './components/movefile-dialog'
// 引⼊图⽚⼦组件dialog
import viewerDialog from './components/viewer-dialog'
// 引⼊视频播放组件
import player from '@/components/Video-player'
export default {
name: 'Videomanagement',
name: 'Videomanagement',
components: {
uploaderDialog,
moveFileDialog,
viewerDialog,
player
},
filters: {
sizeFilter($bytesize) {
let $i = 0
while (Math.abs($bytesize) >= 1024) {
$bytesize = $bytesize / 1024
$i++
if ($i === 4) break
}
const $units = ['Bytes', 'KB', 'MB', 'GB', 'TB']
const $newsize = und($bytesize, 2)
return $newsize + ' ' + $units[$i]
}
},
data() {
return {
uploadeFile_loading: false,
rename_loading: false,
defultThumUrl: '../../assets/svg/icon-file-thumbnail.svg', // 默认⽂件夹的样式图⽚
loading: false, // 加载loading样式
keyWord: '', // 查询关键字
resType: '-1', // 资源类型查询条件
id: 0, // 当前⽬录id
parentId: 0, // 当前⽬录的⽗⽂件夹id
upfileUrl: '', // 上传⽂件服务器的url地址
showDialog: false, // 是否弹出上传dialog
moveFileDialog: false, // 是否弹出移动⽂件dialog
showImageDialog: false, // 弹出⼤图浏览dialog
imgSrc: '', // 弹出⼤图的图⽚url地址
imgTitle: '', // 弹出⼤图的图⽚title
showlPlayVideo: false, // 弹出视频播放
videoUrl: '', // 视频播放地址
state: false, // 视频播放状态
poster: '', // 视频播放的封⾯
activeFlag: false, // ⽤来显⽰关闭删除，重命名，移动到按钮操作
activeFlagNotReame: false, // 当激活多个元素的时候，重命名操作灰掉
activeFlagMoveble: false, // 当激活选中的元素中有⽂件夹的时候，移动操作不可⽤，灰掉 activeItems: [], // 选中激活的⽂件列表
files: [], // ⽂件数据列表
folderListData: [], // ⽂件夹列表数据
breadcrumbList: [], // ⾯包屑中保存的⽂件夹数据
toggleCheckAllSelectFlag: false, // 全选样式切换
pageIndex: 1, // 分页参数-当前页
pageSize: 100, // 分页参数-分页⼤⼩
total: 0, // 分页参数-总条数
storagePercent: 0, // 存储空间容量百分⽐
maxStorage: 0, // 存储空间总容量
useStorage: 0, // 存储空间已⽤容量
renameDialogVisible: false,
renameForm: {
name: ''
},
renameRules: {
name: { required: true,
pattern: /^[^/\\\\:\\*\\?\\<\\>\\|\"]{1,255}$/,
message: this.$t('material.incorrectFileNameTips'), // 请输⼊正确的⽂件名称
trigger: 'blur'
}
}
}
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论