[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端部分