【项目】UniApp实战多端企业网盘全栈开发 11 通用列表组件开发【二】

ゝ一世哀愁。 2024-03-22 14:54 78阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  11 通用列表组件开发【二】

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

##### 11 通用列表组件开发【二】 #####

封装一下我们之前写好的那个列表组件

f-list.vue

`index.vue`

<f-list></f-list>
    
    	</view>
    </template>
    
    <script>
    	import navBar from '@/components/common/nav-bar.vue'
    	import fList from '@/components/common/f-list.vue'

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

使用没问题，但是现在我们要封装一下数据格式

不同的文件类型，显示不同的样式

`f-list.vue`

<template>
    	<view class="p-3 flex align-center border-bottom border-light-secondary">
    		<text class="iconfont icon-file-b-2 text-warning" style="font-size: 60rpx;"></text>
    		<view class="flex flex-column ml-3" style="line-height: 1.2;">
    			<text class="font-md">{
       {item.name}}</text>
    			<text class="font-sm text-muted">{
       {item.create_time}}</text>
    		</view>
    		<view class="ml-auto flex align-center justify-center" style="width: 70rpx;height: 70rpx;">
    			<text v-if="!item.checked" style="height: 25rpx;width: 25rpx;" class="rounded-circle border"></text>
    			<text v-else class="iconfont icon-xuanze-yixuan text-primary" style="font-size: 40rpx;"></text>
    		</view>
    	</view>
    </template>
    
    <script>
    	export default {
    		props: {
    			item: Object,
    			index: [Number, String]
    		}
    	}
    </script>
    
    <style>
    </style>

list: [{
    						type: "dir",
    						name: "我的笔记",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
    						type: "image",
    						name: "风景.jpg",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
    						type: "video",
    						name: "uniapp实战教程.mp4",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
    						type: "text",
    						name: "记事本.txt",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					},
    					{
    						type: "none",
    						name: "压缩包.rar",
    						create_time: "2023-04-29 21:19",
    						checked: false
    					}
    				]
    			}

<f-list v-for="(item,index) in list" :key="index" :item="item" :index="index"></f-list>

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

下面就是根据不同的文件类型展示不同的图标

`f-list.vue`

<template>
    	<view class="p-3 flex align-center border-bottom border-light-secondary">
    		<text class="iconfont" :class="iconClass" style="font-size: 60rpx;"></text>
    		<view class="flex flex-column ml-3" style="line-height: 1.2;">
    			<text class="font-md">{
       {item.name}}</text>
    			<text class="font-sm text-muted">{
       {item.create_time}}</text>
    		</view>
    		<view class="ml-auto flex align-center justify-center" style="width: 70rpx;height: 70rpx;">
    			<text v-if="!item.checked" style="height: 25rpx;width: 25rpx;" class="rounded-circle border"></text>
    			<text v-else class="iconfont icon-xuanze-yixuan text-primary" style="font-size: 40rpx;"></text>
    		</view>
    	</view>
    </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 {
    		props: {
    			item: Object,
    			index: [Number, String]
    		},
    		computed: {
    			iconClass() {
    				let item = icons[this.item.type]
    				return `${item.icon} ${item.color}`
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

效果

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

效果还不错。

[2e7684d16b334b7f9a5aa706a1b7e646.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/395af651bf5949f28afb0a9611029597.png
[15a07b44fdda4ec3b4a170820bc221b3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/13501bd1728044398fac63811cbb039e.png
[f2410de7f6be4830b0edae4c41ca67c6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/dcb380e493f546cd8a8a0c076d01314a.png
[90ff792ed98b4ead8cac09534f8d24d0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/0eec2d18e8e445ba99b807a35bf19c75.png