* 使用iview框架的导航组件实现顶部导航
~~~
<template>
<Layout class="layout">
<Header class="bg-white px-0">
<Menu @on-select="handleSelect" mode="horizontal" theme="light" :active-name="topActive" class="d-flex align-items-center">
<MenuItem :name="index" v-for="(item,index) in topMenus" :key="index">
<Icon :type="item.icon" />
{{item.title}}
</MenuItem>
</Menu>
</Header>
<Layout>
<Sider hide-trigger class="bg-light">侧边栏</Sider>
<Content class="bg-white">主内容</Content>
</Layout>
<Footer class="bg-white d-flex p-0 ">
<div class="bg-light footer-left">
空间容量信息
</div>
<div>分页</div>
</Footer>
</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;
}
}
}
</script>
<style scoped="scoped">
.layout {
height: 100%;
}
.footer-left{
width: 200px;
}
</style>
~~~
* 实现顶部导航logo
~~~
<template>
<Layout class="layout">
<Header class="bg-white px-0">
<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>
</Menu>
</Header>
<Layout>
<Sider hide-trigger class="bg-light">侧边栏</Sider>
<Content class="bg-white">主内容</Content>
</Layout>
<Footer class="bg-white d-flex p-0 ">
<div class="bg-light footer-left">
空间容量信息
</div>
<div>分页</div>
</Footer>
</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;
}
}
}
</script>
<style scoped="scoped">
.layout {
height: 100%;
}
.footer-left{
width: 200px;
}
.layout-logo{
width: 200px;
text-align: center;
font-size: 25px;
}
</style>
~~~
* 实现下拉菜单
~~~
<template>
<Layout class="layout">
<Header class="bg-white px-0">
<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="bg-light">侧边栏</Sider>
<Content class="bg-white">主内容</Content>
</Layout>
<Footer class="bg-white d-flex p-0 ">
<div class="bg-light footer-left">
空间容量信息
</div>
<div>分页</div>
</Footer>
</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;
}
}
}
</script>
<style scoped="scoped">
.layout {
height: 100%;
}
.footer-left {
width: 200px;
}
.layout-logo {
width: 200px;
text-align: center;
font-size: 25px;
}
</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端部分