* 使用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端部分