[toc]
### 1. 删除components目录内的HelloWorld.vue组件
### 2.在components目录内创建media-list.vue组件
### 3. 将文件列表的内容封装到media-list.vue组件内
```
<template>
<div class="border-bottom px-3 py-2">
<Row>
<Col span="12" class="d-flex align-items-center">
<Checkbox size="small" class="mb-0 mr-3"></Checkbox>
<i class="iconfont icon-file-b-2 text-warning mr-3" style="font-size:28px"></i>
<small>我的目录</small>
<div class="ml-auto text-primary">
<Tooltip content="分享" placement="bottom">
<Icon type="md-share" size="18" class="mx-2 icon" />
</Tooltip>
<Tooltip content="下载" placement="bottom">
<Icon type="md-cloud-download" size="18" class="mx-2 icon" />
</Tooltip>
<Dropdown>
<Icon type="ios-more" size="18" class="mx-2 icon" />
<DropdownMenu slot="list">
<DropdownItem>重命名</DropdownItem>
<DropdownItem>删除</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Col>
<Col span="6" class="d-flex align-items-center">-</Col>
<Col span="6" class="d-flex align-items-center"><small class="text-secondary">2021-03-04 15:00:01</small></Col>
</Row>
</div>
</template>
<script>
</script>
<style>
</style>
```
### 4. 在index.vue组件内引入media-list.vue组件,并进行注册与引用
```
<template>
<div>
<div class="index-top bg-white border-bottom px-3">
<div class="d-flex top-button align-items-center">
<Button type="primary" icon="ios-search" class="mr-2">上传</Button>
<Button icon="ios-search" class="mr-2">新建文件夹</Button>
<Button icon="ios-search" class="mr-2">下载</Button>
<Button icon="ios-search" class="mr-2">分享</Button>
<Button icon="ios-search" class="mr-2">重命名</Button>
<Button icon="ios-search" class="mr-2">删除</Button>
<Input class="ml-auto top-search" search enter-button placeholder="请输入关键词" />
</div>
<div class="top-select d-flex align-items-center">
<Checkbox size="small"><span class="ml-2">全选</span></Checkbox>
</div>
</div>
<div class="index-list">
<media-list></media-list>
</div>
<div class="index-page d-flex align-items-center px-3 border-top">
<Page :total="100" show-sizer />
</div>
</div>
</template>
<script>
import mediaList from "../components/media-list.vue"
export default {
components : {
mediaList
}
}
</script>
<style scoped="scoped">
.index-top {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 90px;
}
.top-search {
width: 200px;
}
.top-button {
height: 50px;
}
.index-page {
height: 55px;
position: absolute;
left: 0;
bottom: 0;
right: 0;
}
.index-list {
position: absolute;
overflow-y: auto;
left: 0;
right: 0;
bottom: 55px;
top: 90px;
}
.top-select {
height: 40px;
}
.icon{
cursor: pointer;
}
</style>
```
### 5. 模拟文件列表的数据
```
<script>
import mediaList from "../components/media-list.vue"
export default {
components: {
mediaList
},
data() {
return {
list: [{
type: "dir",
name: "我的笔记",
create_time: "2019-12-15 08:00",
checked: false
}, {
type: "dir",
name: "我的备份",
create_time: "2019-12-15 08:00",
checked: false
}, {
type: "dir",
name: "相册管理",
create_time: "2019-12-15 08:00",
checked: false
}, {
type: "dir",
name: "我的资源",
create_time: "2019-12-15 08:00",
checked: false
}, {
type: "image",
name: "风景.jpg",
create_time: "2019-12-15 08:00",
checked: false,
url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg"
}, {
type: "image",
name: "海报.jpg",
create_time: "2019-12-15 08:00",
checked: false,
url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg"
}, {
type: "video",
name: "uniapp实战社区交友教程.mp4",
create_time: "2019-12-15 08:00",
checked: false,
url: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4"
}, {
type: "video",
name: "uniapp实战商城教程.mp4",
create_time: "2019-12-15 08:00",
checked: false,
url: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4"
}, {
type: "video",
name: "uniapp实战仿微信教程.mp4",
create_time: "2019-12-15 08:00",
checked: false,
url: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4"
}, {
type: "image",
name: "摄影.jpg",
create_time: "2019-12-15 08:00",
checked: false,
url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/3.jpg"
}, {
type: "text",
name: "记事本.txt",
create_time: "2019-12-15 08:00",
checked: false
}, {
type: "none",
name: "压缩包.rar",
create_time: "2019-12-15 08:00",
checked: false
}]
}
}
}
</script>
```
### 6.动态渲染文件列表的数据
```
// index.vue
<div class="index-list">
<media-list v-for="(item,index) in list" :item="item" :index="index" :key="index"></media-list>
</div>
```
```
//media-list.vue
<template>
<div class="border-bottom px-3 py-2">
<Row>
<Col span="12" class="d-flex align-items-center">
<Checkbox size="small" class="mb-0 mr-3" :value="item.checked"></Checkbox>
<i class="iconfont icon-file-b-2 text-warning mr-3" style="font-size:28px"></i>
<small>{{item.name}}</small>
<div class="ml-auto text-primary">
<Tooltip content="分享" placement="bottom">
<Icon type="md-share" size="18" class="mx-2 icon" />
</Tooltip>
<Tooltip content="下载" placement="bottom">
<Icon type="md-cloud-download" size="18" class="mx-2 icon" />
</Tooltip>
<Dropdown>
<Icon type="ios-more" size="18" class="mx-2 icon" />
<DropdownMenu slot="list">
<DropdownItem>重命名</DropdownItem>
<DropdownItem>删除</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Col>
<Col span="6" class="d-flex align-items-center">-</Col>
<Col span="6" class="d-flex align-items-center"><small class="text-secondary">2021-03-04 15:00:01</small></Col>
</Row>
</div>
</template>
<script>
export default {
props : {
item : Object,
index: [Number,String]
}
}
</script>
<style>
</style>
```
### 7. 模拟文件夹图标与颜色数据
```
const icons = {
dir:{
icon:"icon-file-b-2",
color:"text-warning"
},
image:{
icon:"icon-file-b-6",
color:"text-success"
},
video:{
icon:"icon-file-b-9",
color:"text-primary"
},
text:{
icon:"icon-file-s-7",
color:"text-info"
},
none:{
icon:"icon-file-b-8",
color:"text-muted"
},
};
```
### 8. 渲染列表的图标
```
<template>
<div class="border-bottom px-3 py-2">
<Row>
<Col span="12" class="d-flex align-items-center">
<Checkbox size="small" class="mb-0 mr-3" :value="item.checked"></Checkbox>
<i class="iconfont mr-3" :class="icon" style="font-size:28px"></i>
<small>{{item.name}}</small>
<div class="ml-auto text-primary">
<Tooltip content="分享" placement="bottom">
<Icon type="md-share" size="18" class="mx-2 icon" />
</Tooltip>
<Tooltip content="下载" placement="bottom">
<Icon type="md-cloud-download" size="18" class="mx-2 icon" />
</Tooltip>
<Dropdown>
<Icon type="ios-more" size="18" class="mx-2 icon" />
<DropdownMenu slot="list">
<DropdownItem>重命名</DropdownItem>
<DropdownItem>删除</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Col>
<Col span="6" class="d-flex align-items-center">-</Col>
<Col span="6" class="d-flex align-items-center"><small class="text-secondary">2021-03-04 15:00:01</small></Col>
</Row>
</div>
</template>
<script>
const icons = {
dir:{
icon:"icon-file-b-2",
color:"text-warning"
},
image:{
icon:"icon-file-b-6",
color:"text-success"
},
video:{
icon:"icon-file-b-9",
color:"text-primary"
},
text:{
icon:"icon-file-s-7",
color:"text-info"
},
none:{
icon:"icon-file-b-8",
color:"text-muted"
},
};
export default {
props : {
item : Object,
index: [Number,String]
},
computed : {
icon(){
let o = icons[this.item.type]
return `${o.icon} ${o.color}`
}
}
}
</script>
<style>
</style>
```
### 9.渲染列表时间的数据
```
<Col span="6" class="d-flex align-items-center"><small class="text-secondary">{{item.create_time}}</small></Col>
```
- 第一章 VUE-CLI+IVIEW进行项目初始化
- 1.1 使用vue-cli4创建项目
- 1.2 引入iview组件库
- 1.3 引入bootstrap4和图标库
- 1.4 安装和配置vue-router
- 第二章 pc端登录页开发
- 2.1 pc端登录页开发(一)
- 2.2 pc端登录页开发(二)
- 2.3 pc端登录页开发(三)
- 第三章 pc端全局布局开发
- 3.1 pc端全局布局开发(一)
- 3.2 pc端全局布局开发(二) 顶部导航
- 第四章 pc端侧边栏开发
- 4.1 pc端侧边栏开发(一) 菜单
- 4.2 pc端侧边栏开发(二) 容量提示
- 第五章 pc端文件列表开发
- 5.1 pc端文件列表开发(一) 操作条
- 5.2 pc端文件列表开发(二) 列表(1)
- 5.3 pc端文件列表开发(三) 列表(2)
- 第六章 封装多功能文件列表组件
- 6.1 封装文件列表组件(一)
- 6.2 封装文件列表组件(二) 删除
- 6.3 封装文件列表组件(三) 多选操作
- 6.4 封装文件列表组件(四) 重命名
- 6.5 封装文件列表组件(五) 图片预览
- 第七章 前端数据交互开发
- 7.1 pc端交互-引入axios和vuex
- 7.2 pc端交互-注册登录
- 7.3 pc端交互-初始化和退出登录
- 7.4 pc端交互-拦截器完善
- 7.5 权限验证
- 7.6 pc端交互-获取文件列表
- 7.7 pc端交互-创建文件夹
- 7.8 上传文件
- 7.9 pc端交互-文件重命名
- 7.10 pc端交互-批量删除
- 7.11 pc端交互-搜索文件
- 7.12 pc端交互-切换目录
- 7.13 pc端交互-优化体验和筛选类型
- 7.14 pc端交互-下载文件
- 7.15 pc端交互-生成分享链接
- 7.16 pc端交互-我的分享列表
- 7.17 pc端交互-查看分享
- 7.18 pc端交互-保存我的网盘
- 第八章 项目打包与部署
- 8.1 部署前环境搭建
- 8.2 部署pc端部分