【项目】UniApp实战多端企业网盘全栈开发 12 多选操作开发【一】

水深无声 2024-03-22 14:54 45阅读 0赞

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

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

*   *  【项目】UniApp实战多端企业网盘全栈开发
     *   *   *  12 多选操作开发【一】

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

##### 12 多选操作开发【一】 #####

修改`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;" @click.stop="select">
    			<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}`
    			}
    		},
    		methods: {
    			select() {
    				this.$emit('select', {
    					index: this.index,
    					value: !this.item.checked
    				})
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

在`index.vue` 中进行监听

<f-list v-for="(item,index) in list" :key="index" :item="item" :index="index" @select="select"></f-list>
    
    		methods: {
    			select(e) {
    				this.list[e.index].checked = e.value;
    			}
    		}

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

这样就实现了选中、取消选中

[88f930b79ff64778bf78bf954206c041.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a2f8fb675bb14431b83f42a1a9e3e709.png
[8736352c0f96440f8f737816e3e4dd24.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/a9d9efc7c9364a2bb488bde0af1f241c.png