【项目】UniApp实战多端企业网盘全栈开发 36 PC端文件列表开发

谁践踏了优雅 2024-03-22 16:20 9阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  36 PC端文件列表开发

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

##### 36 PC端文件列表开发 #####

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

<template>
    	<Layout style="height: 100vh;">
    		<Header class="bg-white px-0" style="height: 60px; line-height: 60px;">
    
    			<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 style="background-color: #EBF0F1; position: relative;" hide-trigger>
    				<Menu theme="light" active-name="1" width="200px" style="background-color: #EBF0F1;"
    					@on-select="handleSiderSelect">
    					<MenuGroup title="全部文件">
    						<MenuItem name="1">
    						<Icon type="md-document" />
    						图片
    						</MenuItem>
    						<MenuItem name="2">
    						<Icon type="md-chatbubbles" />
    						视频
    						</MenuItem>
    						<MenuItem name="3">
    						<Icon type="md-document" />
    						音乐
    						</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 style="width: 200px;background-color: #EBF0F1;height: 55px;position: absolute;bottom: 0;left: 0;"
    					class="px-3">
    					<Progress :percent="90" :stroke-color="['#108ee9', '#87d068']" hide-info />
    					<div class="d-flex mt-2" style="justify-content: space-between;">
    						<small>总共: 100GB</small>
    						<small class="text-warning">已用: 90GB</small>
    					</div>
    				</div>
    
    			</Sider>
    			<Content class="bg-white" style="position: relative;">
    				<div style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;overflow-y: auto;">
    					<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) {
    				this.topActive = e
    			},
    
    			handleSiderSelect(e) {
    				console.log(e);
    			}
    		}
    	}
    </script>
    
    <style>
    	.ivu-progress-inner {
    		background-color: #FFFFFF !important;
    		border: 1px solid #aaaaaa !important;
    	}
    </style>

新建页面`index.vue`：

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

注册路由：

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({
        
    	routes: [{
        
    			path: "/login",
    			name: "login",
    			meta: {
        
    				title: "登录页"
    			},
    			component: () => import('./pages/login.vue')
    		},
    		{
        
    			path: "/",
    			name: "layout",
    			component: () => import('./pages/layout.vue'),
    			redirect: {
        
    				name: "index"
    			},
    			children: [{
        
    				path: "/index",
    				name: "index",
    				component: () => import('./pages/template/index.vue')
    			}]
    		}
    	]
    })

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

现在的效果

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

这下就修改我们的`index.vue` 就行了

<template>
    	<div>
    		<div class="border-bottom d-flex px-3 py-2" style="position: absolute;top: 0;left: 0;right: 0;">
    			<Button type="primary" icon="ios-cloud-upload-outline" class="mr-2">上传</Button>
    			<Button icon="ios-folder" class="mr-2">新建文件夹</Button>
    			<Button icon="ios-cloud-download" class="mr-2">下载</Button>
    			<Button icon="md-share" class="mr-2">分享</Button>
    			<Button icon="ios-brush" class="mr-2">重命名</Button>
    			<Button icon="ios-close-circle" class="mr-2">删除</Button>
    
    			<Input class="ml-auto" style="width: 200px;" search enter-button placeholder="请输入关键词..." />
    		</div>
    	</div>
    </template>
    
    <script>
    </script>
    
    <style>
    </style>

效果

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

可以。

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

效果

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

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

<template>
    	<div>
    		<div class="border-bottom px-3" style="position: absolute;top: 0;left: 0;right: 0; height: 90px;">
    			<div class="d-flex align-items-center" style="height: 50px;">
    				<Button type="primary" icon="ios-cloud-upload-outline" class="mr-2">上传</Button>
    				<Button icon="ios-folder" class="mr-2">新建文件夹</Button>
    				<Button icon="ios-cloud-download" class="mr-2">下载</Button>
    				<Button icon="md-share" class="mr-2">分享</Button>
    				<Button icon="ios-brush" class="mr-2">重命名</Button>
    				<Button icon="ios-close-circle" class="mr-2">删除</Button>
    
    				<Input class="ml-auto" style="width: 200px;" search enter-button placeholder="请输入关键词..." />
    			</div>
    			<div style="height: 40px;" class="d-flex align-items-center">
    				<Checkbox size="small"><span class="ml-3">全选</span></Checkbox>
    			</div>
    		</div>
    
    		<div style="position: absolute;overflow-y: auto;left: 0;right: 0;top: 90px; bottom: 55px;">
    
    			<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: 20px;"></i>
    					<small>我的目录</small>
    
    					<div class="ml-auto text-primary">
    						<Tooltip content="分享" placement="bottom">
    							<Icon type="md-share" size="18" class="mx-2" style="cursor: pointer;" />
    						</Tooltip>
    
    						<Tooltip content="下载" placement="bottom">
    							<Icon type="md-cloud-download" size="18" class="mx-2" style="cursor: pointer;" />
    						</Tooltip>
    
    						<Dropdown>
    							<Icon type="ios-more" size="18" class="mx-2" style="cursor: pointer;" />
    							<DropdownMenu slot="list">
    								<DropdownItem>重命名</DropdownItem>
    								<DropdownItem>删除</DropdownItem>
    							</DropdownMenu>
    						</Dropdown>
    
    					</div>
    
    					</Col>
    					<Col span="6" style="height: 42px;" class="d-flex align-items-center">-</Col>
    					<Col span="6" style="height: 42px;" class="d-flex align-items-center"><small
    						class="text-secondary">2023-04-30 20:43</small></Col>
    				</Row>
    			</div>
    
    		</div>
    
    		<div style="height: 55px;position: absolute;left: 0;bottom: 0;right: 0;"
    			class="d-flex align-items-center px-3 border-top">
    			<Page :total="100" show-sizer />
    		</div>
    
    	</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 {
    
    	}
    </script>
    
    <style>
    </style>

效果

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

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

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

[081b4229cfa84d0e8f7d78f439f4798a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/4961e1e88dd44cf08c667e4bf5e65511.png
[74291f339c0d40d08b6214ef33192b9a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/2486e5695272461c8b983c865660065a.png
[868cb47afb36463b8eb7d51106066a78.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ebb701417e3d414ab78df7ad37ce3c09.png
[3553fbf34ff440288b2472472982f5ef.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a75d9e9a302f4fbd96db74e5f6551678.png
[b1994e14827d4ee396a639f410c2a3b0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6e8f93332be049aea068b3888a4292b4.png
[289fba16296d45fbafd2c655afc7b451.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/52b28ed807774655a68e41c4346aaa8d.png
[928162ebd4d84506929573426cc70e89.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/8a4f51199cce4bfea3d39a8f443282b4.png
[69e4fcde7abd4fa392c562b5769f5394.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/ad975e0460af490ebbcf30a80c6edfba.png
[04b951a7777a4af3b2e77be8613a1b06.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f1674d35d90946e0b2cfeb00325f4d24.png