【项目】UniApp实战多端企业网盘全栈开发 34 PC端全局布局开发

旧城等待， 2024-03-22 16:20 14阅读 0赞

### 【项目】UniApp实战多端企业网盘全栈开发 ###

#### 文章目录 ####

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  34 PC端全局布局开发

![在这里插入图片描述][76abcff8f4a94d97872dd8e87f17e65d.png_pic_center]

##### 34 PC端全局布局开发 #####

新建`layout.vue` 页面文件

<template>
    	<Layout>
    		<Header>Header</Header>
    		<Layout>
    			<Sider hide-trigger>Sider</Sider>
    			<Content>Content</Content>
    		</Layout>
    		<Footer>Footer</Footer>
    	</Layout>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>

![在这里插入图片描述][b0e6898209bc4ebda2f96386f8ff43b2.png_pic_center]

配置路由

{
        
    			path: "/",
    			name: "layout",
    			component: () => import('./pages/layout.vue')
    		}

![在这里插入图片描述][691beece71ef4ee080a7d0e243b1872f.png_pic_center]

直接访问根路径

![在这里插入图片描述][dc316b84bcf7467d8f7193e465ab8899.png_pic_center]

没问题

修改`layout.vue`

<template>
    	<Layout style="height: 100vh;">
    		<Header class="bg-white px-0">导航栏</Header>
    		<Layout>
    			<Sider class="bg-light" hide-trigger>侧边栏</Sider>
    			<Content class="bg-white">主内容</Content>
    		</Layout>
    		<Footer class="bg-white d-flex p-0">
    			<div class="bg-light" style="width: 200px;">
    				空间容量信息
    			</div>
    			<div>分页</div>
    		</Footer>
    	</Layout>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>

效果

![在这里插入图片描述][3c03634256f44322b33dc31c087a55d5.png_pic_center]

这样就把各大区域划出来了。

继续修改我们的`layout.vue`

<template>
    	<Layout style="height: 100vh;">
    		<Header class="bg-white px-0">
    
    			<Menu mode="horizontal" theme="light" :active-name="topActive" @on-select="handleSelect"
    				class="d-flex align-items-center">
    				<div style="width: 200px;font-size: 18px;" class="text-center">
    					企业网盘
    				</div>
    				<MenuItem :name="index" v-for="(item,index) in topMenus" :key="index">
    				<Icon :type="item.icon" />
    				{
       {item.title}}
    				</MenuItem>
    
    				<div class="ml-auto mr-5">
    					<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 class="bg-light" hide-trigger>侧边栏</Sider>
    			<Content class="bg-white">主内容</Content>
    		</Layout>
    		<Footer class="bg-white d-flex p-0">
    			<div class="bg-light" style="width: 200px;">
    				空间容量信息
    			</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) {
    				this.topActive = e
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

效果

![在这里插入图片描述][baae87938f6941b0831e40afb12470a8.png_pic_center]

![在这里插入图片描述][61f295d4d3834c07b7e7f194d11fad50.png_pic_center]

没问题

[76abcff8f4a94d97872dd8e87f17e65d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d569922b63a54f808784b7374e90b46f.png
[b0e6898209bc4ebda2f96386f8ff43b2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/08fcd0f6b6a64105b22b8bf3ca6a931e.png
[691beece71ef4ee080a7d0e243b1872f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/55e22cc4e59243adb681bab9037270aa.png
[dc316b84bcf7467d8f7193e465ab8899.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/82536c9ff3a941209a78a63422f51440.png
[3c03634256f44322b33dc31c087a55d5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8fe4fc6f3e3b4d2a817334a7136b5a31.png
[baae87938f6941b0831e40afb12470a8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/9bed62c4bce6441eb41cf056faae062a.png
[61f295d4d3834c07b7e7f194d11fad50.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/d44ead417c23497aa7726853cd6ed54b.png