自定义Uview的Album 相册组件添加删除功能

最新推荐文章于 2025-04-30 00:03:40 发布

原创

最新推荐文章于 2025-04-30 00:03:40 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ios #xcode #前端

本文介绍如何在Album组件中添加删除图片功能，并实现图片预览及超出数量折叠效果。

功能需要，直接使用了Album组件不用自己去调样式了，直接可以大图预览，对超出限制数量的照片可以折叠
在这里插入图片描述

修改组件

先找到组件中图片的位置。添加一格删除图标，给图标添加点击事件,我这里显示图片的地址是包含文件id的从删除的点击事件在预览地址中取出文件id就行传回父组件就想行。
在这里插入图片描述
这里有个事件冒泡，需要处理下，不然会点击也有预览效果

<view @click.stop="del(item)" class="delIcon">
	<image src="@/static/delete.png" style="width: 20px;height: 20px;" mode=""></image>
</view>

在这里插入图片描述

修改样式

.delIcon {
	position: absolute;
	right: 0
}

添加事件

del(item) {
	let id = item.split('=')[1]
	this.$emit('delPicClick', id) //父组件中调用删除方法 同时刷新数据，把id交出去
},

调用组件的地方,拿到需要删除的ID

<u-album @delPicClick="delPicClick" class="album" :urls="urls2" :multipleSize="width"></u-album>

//子组件的相应事件
delPicClick(id) {
				delPic({id}).then(res => {   //删除接口
					this.getPhotoList()
				})
			},

修改之后的Album组件

<template>
	<view class="u-album">
		<view class="u-album__row" ref="u-album__row" v-for="(arr, index) in showUrls" :forComputedUse="albumWidth"
			:key="index">
			<view class="u-album__row__wrapper" v-for="(item, index1) in arr" :key="index1"
				:style="[imageStyle(index + 1, index1 + 1)]" @tap="previewFullImage ? onPreviewTap(getSrc(item)) : ''">