【项目】UniApp实战多端企业网盘全栈开发 37 封装文件列表组件

﹏ヽ暗。殇╰゛Y 2024-03-22 16:40 60阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  37 封装文件列表组件

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

##### 37 封装文件列表组件 #####

新建组件 `media-list.vue`

<template>
    
    	<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" :value="item.checked"></Checkbox>
    			<i class="iconfont mr-3" :class="icon" style="font-size: 20px;"></i>
    			<small>{
       {item.name}}</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">{
       {item.create_time}}</small></Col>
    		</Row>
    	</div>
    
    </template>
    
    <script>
    	import {
    		Icon
    	} from 'view-design';
    	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: {
    			icon() {
    				let o = icons[this.item.type]
    				return `${o.icon} ${o.color}`
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

`index.vue` 调用组件

渲染效果

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

没问题，还阔以。

继续修改`media-list.vue` 组件

<template>
    
    	<div class="border-bottom px-3 py-2 file-list">
    		<Row>
    			<Col span="12" class="d-flex align-items-center">
    			<Checkbox size="small" class="mb-0 mr-3" :value="item.checked"></Checkbox>
    			<i class="iconfont mr-3" :class="icon" style="font-size: 20px;"></i>
    			<small>{
       {item.name}}</small>
    
    			<div class="ml-auto text-primary hide">
    				<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 @click.native="deleteItem">删除</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">{
       {item.create_time}}</small></Col>
    		</Row>
    	</div>
    
    </template>
    
    <script>
    	import {
    		Icon
    	} from 'view-design';
    	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: {
    			icon() {
    				let o = icons[this.item.type]
    				return `${o.icon} ${o.color}`
    			}
    		},
    		methods: {
    			deleteItem() {
    				this.$Modal.confirm({
    					title: "提示",
    					content: "是否要删除当前选中?",
    					cancelText: "取消",
    
    					onOk: () => {
    						this.$emit('on-event', {
    							type: "delete",
    							item: this.item,
    							index: this.index
    						})
    					},
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    	.file-list:hover {
    		background-color: rgba(45, 140, 240, 0.1) !important;
    	}
    
    	.file-list .hide {
    		display: none;
    	}
    
    	.file-list:hover .hide {
    		display: flex;
    	}
    </style>

在`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;">
    
    			<media-list v-for="(item,index) in list" :key="index" :item="item" :index="index"
    				@on-event="handleEvent"></media-list>
    
    		</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>
    	import mediaList from '@/components/media-list.vue';
    	import {
    		Switch
    	} from 'view-design';
    	export default {
    		components: {
    			mediaList
    		},
    		data() {
    			return {
    				list: [{
    						type: "dir",
    						name: "我的笔记",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的备份",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "相册管理",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的资源",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "image",
    						name: "风景.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg"
    					},
    					{
    						type: "image",
    						name: "海报.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg"
    					},
    					{
    						type: "video",
    						name: "uniapp实战教程.mp4",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4"
    					},
    					{
    						type: "image",
    						name: "摄影.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/3.jpg"
    					},
    					{
    						type: "text",
    						name: "记事本.txt",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "none",
    						name: "压缩包.rar",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    				]
    			}
    		},
    		methods: {
    			handleEvent(e) {
    				switch (e.type) {
    					case 'delete':
    						this.list.splice(e.index, 1)
    						this.$Message.success("删除成功")
    						break;
    					default:
    						break;
    				}
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

效果

![在这里插入图片描述][eca8aaf6abe44c93977f7c82e69e68cf.gif_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" :value="checkAllStatus" @on-change="checkAllChange"><span class="ml-3">全选</span>
    				</Checkbox>
    			</div>
    		</div>
    
    		<div style="position: absolute;overflow-y: auto;left: 0;right: 0;top: 90px; bottom: 55px;">
    
    			<media-list v-for="(item,index) in list" :key="index" :item="item" :index="index"
    				@on-event="handleEvent"></media-list>
    
    		</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>
    	import mediaList from '@/components/media-list.vue';
    	import {
    		Switch
    	} from 'view-design';
    	export default {
    		components: {
    			mediaList
    		},
    		data() {
    			return {
    				list: [{
    						type: "dir",
    						name: "我的笔记",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的备份",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "相册管理",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的资源",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "image",
    						name: "风景.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg"
    					},
    					{
    						type: "image",
    						name: "海报.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg"
    					},
    					{
    						type: "video",
    						name: "uniapp实战教程.mp4",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4"
    					},
    					{
    						type: "image",
    						name: "摄影.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/3.jpg"
    					},
    					{
    						type: "text",
    						name: "记事本.txt",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "none",
    						name: "压缩包.rar",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    				]
    			}
    		},
    
    		computed: {
    			checkList() {
    				return this.list.filter(item => item.checked)
    			},
    			checkAllStatus() {
    				return this.checkList.length === this.list.length
    			}
    		},
    
    		methods: {
    			handleEvent(e) {
    				switch (e.type) {
    					case 'delete':
    						this.list.splice(e.index, 1)
    						this.$Message.success("删除成功")
    						break;
    					case 'checked':
    						this.list[e.index].checked = e.value
    						break;
    					default:
    						break;
    				}
    			},
    			checkAllChange(e) {
    				this.list.map(item => {
    					item.checked = e
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

`media-list.vue`

<template>
    
    	<div class="border-bottom px-3 py-2 file-list">
    		<Row>
    			<Col span="12" class="d-flex align-items-center">
    			<Checkbox size="small" class="mb-0 mr-3" :value="item.checked" @on-change="onChange"></Checkbox>
    			<i class="iconfont mr-3" :class="icon" style="font-size: 20px;"></i>
    			<small>{
       {item.name}}</small>
    
    			<div class="ml-auto text-primary hide">
    				<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 @click.native="deleteItem">删除</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">{
       {item.create_time}}</small></Col>
    		</Row>
    	</div>
    
    </template>
    
    <script>
    	import {
    		Icon
    	} from 'view-design';
    	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: {
    			icon() {
    				let o = icons[this.item.type]
    				return `${o.icon} ${o.color}`
    			}
    		},
    		methods: {
    			deleteItem() {
    				this.$Modal.confirm({
    					title: "提示",
    					content: "是否要删除当前选中?",
    					cancelText: "取消",
    
    					onOk: () => {
    						this.$emit('on-event', {
    							type: "delete",
    							item: this.item,
    							index: this.index
    						})
    					},
    				})
    			},
    			onChange(e) {
    				this.$emit('on-event', {
    					type: "checked",
    					index: this.index,
    					value: e
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    	.file-list:hover {
    		background-color: rgba(45, 140, 240, 0.1) !important;
    	}
    
    	.file-list .hide {
    		display: none;
    	}
    
    	.file-list:hover .hide {
    		display: flex;
    	}
    </style>

效果

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

但凡取消一个选中，全选自动消失

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

补上之后，全选恢复

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

![在这里插入图片描述][3b5fbeb2e8ab4c80b4f27fa2e51ab163.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" v-if="checkedCount">下载</Button>
    				<Button icon="md-share" class="mr-2" v-if="checkedCount === 1">分享</Button>
    				<Button icon="ios-brush" class="mr-2" v-if="checkedCount === 1">重命名</Button>
    				<Button icon="ios-close-circle" class="mr-2" v-if="checkedCount">删除</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" :value="checkAllStatus" @on-change="checkAllChange"><span class="ml-3">全选</span>
    				</Checkbox>
    			</div>
    		</div>
    
    		<div style="position: absolute;overflow-y: auto;left: 0;right: 0;top: 90px; bottom: 55px;">
    
    			<media-list v-for="(item,index) in list" :key="index" :item="item" :index="index"
    				@on-event="handleEvent"></media-list>
    
    		</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>
    	import mediaList from '@/components/media-list.vue';
    	import {
    		Switch
    	} from 'view-design';
    	export default {
    		components: {
    			mediaList
    		},
    		data() {
    			return {
    				list: [{
    						type: "dir",
    						name: "我的笔记",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的备份",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "相册管理",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的资源",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "image",
    						name: "风景.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg"
    					},
    					{
    						type: "image",
    						name: "海报.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg"
    					},
    					{
    						type: "video",
    						name: "uniapp实战教程.mp4",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4"
    					},
    					{
    						type: "image",
    						name: "摄影.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/3.jpg"
    					},
    					{
    						type: "text",
    						name: "记事本.txt",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "none",
    						name: "压缩包.rar",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    				]
    			}
    		},
    
    		computed: {
    			checkList() {
    				return this.list.filter(item => item.checked)
    			},
    			checkAllStatus() {
    				return this.checkList.length === this.list.length
    			},
    			checkedCount() {
    				return this.checkList.length
    			}
    		},
    
    		methods: {
    			handleEvent(e) {
    				switch (e.type) {
    					case 'delete':
    						this.list.splice(e.index, 1)
    						this.$Message.success("删除成功")
    						break;
    					case 'checked':
    						this.list[e.index].checked = e.value
    						break;
    					default:
    						break;
    				}
    			},
    			checkAllChange(e) {
    				this.list.map(item => {
    					item.checked = e
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

现在的效果就是

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

无选中，不出现

有一个选中

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

有1个以上选中

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

没问题。

下面实现重命名操作：

`media-list.vue`

<template>
    
    	<div class="border-bottom px-3 py-2 file-list">
    		<Row>
    			<Col span="12" class="d-flex align-items-center">
    			<Checkbox size="small" class="mb-0 mr-3" :value="item.checked" @on-change="onChange"></Checkbox>
    			<i class="iconfont mr-3" :class="icon" style="font-size: 20px;"></i>
    			<small>{
       {item.name}}</small>
    
    			<div class="ml-auto text-primary hide">
    				<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 @click.native="rename">重命名</DropdownItem>
    						<DropdownItem @click.native="deleteItem">删除</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">{
       {item.create_time}}</small></Col>
    		</Row>
    	</div>
    
    </template>
    
    <script>
    	import {
    		Icon
    	} from 'view-design';
    	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]
    		},
    		data() {
    			return {
    				value: ""
    			}
    		},
    		computed: {
    			icon() {
    				let o = icons[this.item.type]
    				return `${o.icon} ${o.color}`
    			}
    		},
    		methods: {
    			deleteItem() {
    				this.$Modal.confirm({
    					title: "提示",
    					content: "是否要删除当前选中?",
    					cancelText: "取消",
    
    					onOk: () => {
    						this.$emit('on-event', {
    							type: "delete",
    							item: this.item,
    							index: this.index
    						})
    					},
    				})
    			},
    			onChange(e) {
    				this.$emit('on-event', {
    					type: "checked",
    					index: this.index,
    					value: e
    				})
    			},
    			rename() {
    				this.$emit('on-event', {
    					type: "rename",
    					index: this.index
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    	.file-list:hover {
    		background-color: rgba(45, 140, 240, 0.1) !important;
    	}
    
    	.file-list .hide {
    		display: none;
    	}
    
    	.file-list:hover .hide {
    		display: flex;
    	}
    </style>

`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" v-if="checkedCount">下载</Button>
    				<Button icon="md-share" class="mr-2" v-if="checkedCount === 1">分享</Button>
    				<Button icon="ios-brush" class="mr-2" v-if="checkedCount === 1" @click="rename(false)">重命名</Button>
    				<Button icon="ios-close-circle" class="mr-2" v-if="checkedCount">删除</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" :value="checkAllStatus" @on-change="checkAllChange"><span class="ml-3">全选</span>
    				</Checkbox>
    			</div>
    		</div>
    
    		<div style="position: absolute;overflow-y: auto;left: 0;right: 0;top: 90px; bottom: 55px;">
    
    			<media-list v-for="(item,index) in list" :key="index" :item="item" :index="index"
    				@on-event="handleEvent"></media-list>
    
    		</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>
    	import mediaList from '@/components/media-list.vue';
    	import {
    		Switch
    	} from 'view-design';
    	export default {
    		components: {
    			mediaList
    		},
    		data() {
    			return {
    				list: [{
    						type: "dir",
    						name: "我的笔记",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的备份",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "相册管理",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "dir",
    						name: "我的资源",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "image",
    						name: "风景.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/1.jpg"
    					},
    					{
    						type: "image",
    						name: "海报.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/2.jpg"
    					},
    					{
    						type: "video",
    						name: "uniapp实战教程.mp4",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/%E8%AF%BE%E6%97%B61.%20%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D.mp4"
    					},
    					{
    						type: "image",
    						name: "摄影.jpg",
    						create_time: "2023-04-30 21:11",
    						checked: false,
    						url: "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/datapic/3.jpg"
    					},
    					{
    						type: "text",
    						name: "记事本.txt",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    					{
    						type: "none",
    						name: "压缩包.rar",
    						create_time: "2023-04-30 21:11",
    						checked: false
    					},
    				]
    			}
    		},
    
    		computed: {
    			checkList() {
    				return this.list.filter(item => item.checked)
    			},
    			checkAllStatus() {
    				return this.checkList.length === this.list.length
    			},
    			checkedCount() {
    				return this.checkList.length
    			}
    		},
    
    		methods: {
    			handleEvent(e) {
    				switch (e.type) {
    					case 'delete':
    						this.list.splice(e.index, 1)
    						this.$Message.success("删除成功")
    						break;
    					case 'checked':
    						this.list[e.index].checked = e.value
    						break;
    					case 'rename':
    						this.rename(e.index)
    						break;
    					default:
    						break;
    				}
    			},
    			checkAllChange(e) {
    				this.list.map(item => {
    					item.checked = e
    				})
    			},
    			rename(index = false) {
    				let item = index !== false ? this.list[index] : this.checkList[0]
    				let value = item.name
    				this.$Modal.confirm({
    					render: (h) => {
    						return h('Input', {
    							props: {
    								value: value,
    								autofocus: true,
    								placeholder: '请填写新名称...'
    							},
    							on: {
    								input: (val) => {
    									value = val;
    								}
    							}
    						})
    					},
    					onOk: () => {
    						item.name = value
    					}
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

效果

![在这里插入图片描述][fdeb26eb2f314805b9723876a68b7871.gif_pic_center]

还可以。

[9caf0e86044e478fa25efa4ba5475cf5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fe4685939aa5410197f9cb2f0952395e.png
[64b6b7d16faf4b7392eccce9853ed801.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c9959bed876e4e08ad32af27d3cc8ac1.png
[eca8aaf6abe44c93977f7c82e69e68cf.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b6b69c6f704749cab1b38a5600a3c7e7.png
[ec151a0dae0847baa0b67bd5f9a6c1e5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/adc16b3e189b4f5792052124b23dcd2d.png
[6f788a3693024de095c786fec6f23ef3.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c32507d1f7a64e198b1538905602fc45.png
[62a18b90cbe14d548b2d8dd23354a140.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0fa0054d3cfc432ea9c0c3c64fef6039.png
[3b5fbeb2e8ab4c80b4f27fa2e51ab163.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0ee8b78fd20c4c6282db4beed442fd81.png
[fa82cf9e455941439709efbc61b932e7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/75e40fcd7ffa449ba6f93d63a274bc4e.png
[6362e1ddd22d4cc0a3089135d1dc0799.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/a2c42ec511f44117bfa39cb3008812e3.png
[c1d4c259722d48e8a12448889647fe3e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/f690abe90ac04e378080063c6d990238.png
[fdeb26eb2f314805b9723876a68b7871.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/b7967bd6c7f4456da6d3ee48d68bbe28.png