[toc]
### 1. 優化底部容量提示,將容量提示放到sider中
```
<template>
<Layout class="layout">
<Header class="bg-white px-0 layout-header">
<Menu @on-select="handleSelect" mode="horizontal" theme="light" :active-name="topActive" class="d-flex align-items-center">
<div class="layout-logo">企業網盤</div>
<MenuItem :name="index" v-for="(item,index) in topMenus" :key="index">
<Icon :type="item.icon" />
{{item.title}}
</MenuItem>
<div class="ml-auto mr-3">
<Dropdown style="margin-left: 20px" placement="bottom-end">
<a href="javascript:void(0)">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
管理員
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>個人資料</DropdownItem>
<DropdownItem>修改密碼</DropdownItem>
<DropdownItem>安全退出</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Menu>
</Header>
<Layout>
<Sider hide-trigger class="sider">
<Menu @on-select="handleSiderSelect" class="sider-menu" theme="light" active-name="1" width="200px">
<MenuGroup title="全部文件">
<MenuItem name="1">
<Icon type="md-document" />
圖片
</MenuItem>
<MenuItem name="2">
<Icon type="md-chatbubbles" />
視頻
</MenuItem>
<MenuItem name="3">
<Icon type="md-chatbubbles" />
音樂
</MenuItem>
<MenuItem name="4">
<Icon type="md-chatbubbles" />
其他
</MenuItem>
</MenuGroup>
<MenuGroup title="其他操作">
<MenuItem name="5">
<Icon type="md-heart" />
我的分享
</MenuItem>
<MenuItem name="6">
<Icon type="md-leaf" />
回收站
</MenuItem>
</MenuGroup>
</Menu>
<div class="footer-left px-3">
<Progress :percent="90" :stroke-color="['#108ee9', '#87d068']" hide-info />
<div class="d-flex mt-2 justify-content-between">
<small>總共: 100GB</small>
<small class="text-warning">已用: 90GB</small>
</div>
</div>
</Sider>
<Content class="bg-white">主內容</Content>
</Layout>
</Layout>
</template>
<script>
export default {
data() {
return {
topActive: 0,
topMenus: [{
icon: "ios-paper",
title: "網盤"
},
{
icon: "ios-people",
title: "分享"
},
{
icon: "ios-construct",
title: "更多"
}
]
}
},
methods: {
handleSelect(e) {
console.log(e)
this.topActive = e;
},
handleSiderSelect(e) {
console.log(e)
}
}
}
</script>
<style scoped="scoped">
.footer-left /deep/ .ivu-progress-inner {
background: #fff !important;
border: 1px solid #eee !important;
}
.layout {
height: 100%;
}
.footer-left {
width: 200px;
background-color: #ebf0f1;
height: 55px;
position: absolute;
bottom:0;
left : 0;
}
.layout-logo {
width: 200px;
text-align: center;
font-size: 25px;
}
.layout-header {
height: 60px;
line-height: 60px;
}
.sider{
position: relative;
}
.sider,
.sider-menu {
background-color: #ebf0f1;
}
</style>
```
### 2. 解決content區域滾動條滾動問題
```
<template>
<Layout class="layout">
<Header class="bg-white px-0 layout-header">
<Menu @on-select="handleSelect" mode="horizontal" theme="light" :active-name="topActive" class="d-flex align-items-center">
<div class="layout-logo">企業網盤</div>
<MenuItem :name="index" v-for="(item,index) in topMenus" :key="index">
<Icon :type="item.icon" />
{{item.title}}
</MenuItem>
<div class="ml-auto mr-3">
<Dropdown style="margin-left: 20px" placement="bottom-end">
<a href="javascript:void(0)">
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
管理員
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem>個人資料</DropdownItem>
<DropdownItem>修改密碼</DropdownItem>
<DropdownItem>安全退出</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
</Menu>
</Header>
<Layout>
<Sider hide-trigger class="sider">
<Menu @on-select="handleSiderSelect" class="sider-menu" theme="light" active-name="1" width="200px">
<MenuGroup title="全部文件">
<MenuItem name="1">
<Icon type="md-document" />
圖片
</MenuItem>
<MenuItem name="2">
<Icon type="md-chatbubbles" />
視頻
</MenuItem>
<MenuItem name="3">
<Icon type="md-chatbubbles" />
音樂
</MenuItem>
<MenuItem name="4">
<Icon type="md-chatbubbles" />
其他
</MenuItem>
</MenuGroup>
<MenuGroup title="其他操作">
<MenuItem name="5">
<Icon type="md-heart" />
我的分享
</MenuItem>
<MenuItem name="6">
<Icon type="md-leaf" />
回收站
</MenuItem>
</MenuGroup>
</Menu>
<div class="footer-left px-3">
<Progress :percent="90" :stroke-color="['#108ee9', '#87d068']" hide-info />
<div class="d-flex mt-2 justify-content-between">
<small>總共: 100GB</small>
<small class="text-warning">已用: 90GB</small>
</div>
</div>
</Sider>
<Content class="bg-white layout-content">
<div class="content-box">
<router-view></router-view>
</div>
</Content>
</Layout>
</Layout>
</template>
<script>
export default {
data() {
return {
topActive: 0,
topMenus: [{
icon: "ios-paper",
title: "網盤"
},
{
icon: "ios-people",
title: "分享"
},
{
icon: "ios-construct",
title: "更多"
}
]
}
},
methods: {
handleSelect(e) {
console.log(e)
this.topActive = e;
},
handleSiderSelect(e) {
console.log(e)
}
}
}
</script>
<style scoped="scoped">
.footer-left /deep/ .ivu-progress-inner {
background: #fff !important;
border: 1px solid #eee !important;
}
.layout {
height: 100%;
}
.footer-left {
width: 200px;
background-color: #ebf0f1;
height: 55px;
position: absolute;
bottom:0;
left : 0;
}
.layout-logo {
width: 200px;
text-align: center;
font-size: 25px;
}
.layout-header {
height: 60px;
line-height: 60px;
}
.sider{
position: relative;
}
.sider,
.sider-menu {
background-color: #ebf0f1;
}
.layout-content{
position: relative;
}
.content-box{
position: absolute;
overflow-y: auto;
bottom: 0;
top: 0;
right: 0;
left: 0;
}
</style>
```
### 3. 在pages目錄內創建template文件夾
### 4. 在template文件夾內創建index.vue
### 5. 配置index.vue組件的路由
```
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
const routes = [
{
path: "/login",
name: "login",
component: () => import( "../views/login.vue")
},
{
path: "/",
redirect : "/index",
name: "layout",
component: () => import("../views/layout.vue"),
children : [
{
path : "/index",
name : "index",
component: () => import("../views/index.vue")
}
]
}
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});
export default router;
```
### 6.實現網盤主布局的頂部操作條
```
<template>
<div>
<div class="index-top border-bottom d-flex px-3 py-2">
<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>
</template>
<script>
</script>
<style scoped="scoped">
.index-top{
position: absolute;
top : 0;
left: 0;
right: 0;
}
.top-search{
width: 200px;
}
</style>
```
- 第一章 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端部分