uniapp 微信小程序 长按删除图片

@longpress长按事件

<template>
	<view class="img-parent">
		<block v-for="(item,index) in arrList" v-key="index">
			<view  @longpress="deleteImage" :data-index="index">
				<image mode="aspectFill" class="img" :src="item.src" />
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arrList: [{
					id: 1,
					src: "../../static/loc/Details.png"
				}, {
					id: 2,
					src: "../../static/loc/DrivingScore.png"
				}, {
					id: 3,
					src: "../../static/loc/Fence.png"
				}, {
					id: 4,
					src: "../../static/loc/Flow.png"
				}, {
					id: 5,
					src: "../../static/loc/ItinerarySummary.png"
				}, {
					id: 6,
					src: "../../static/loc/loc.png"
				}, {
					id: 7,
					src: "../../static/loc/Navigation.png"
				}, {
					id: 8,
					src: "../../static/loc/Testing.png"
				}, {
					id: 9,
					src: "../../static/loc/Track.png"
				}, {
					id: 10,
					src: "../../static/loc/TripShare.png"
				}]
			}
		},
		methods: {
			deleteImage: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index; //获取当前长按图片下标
				wx.showModal({
					title: '提示',
					content: '确定要删除此图片吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('点击确定了');
							that.arrList.splice(index, 1);
						} else if (res.cancel) {
							console.log('点击取消了');
							return false;
						}
					}
				})
			}
		}
	}
</script>

<style>
	.img-parent{
		display: flex;
		flex-wrap: wrap;
	}

	.img {
		width: 80upx;
		height: 80upx;
		margin-left: 30upx;
	}
</style>