uni-app 圖片刪除

刪除圖片

<template>
	<view>
		<view class="tuqu">
			<view class="tukuang" v-for="(item, index) in list" :key="index">
				<image class="chahao" @click="shanchu(index)" src="../../static/img/chahao.png" mode=""></image>
				<image class="tutu" :src="item" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: ['../../static/img/1.jpg', '../../static/img/2.jpg', '../../static/img/3.jpg']
		};
	},
	methods: {
		// 刪除事件
		shanchu(index) {
			console.log(index);
			Eapp.ui.confirm(
				'確定要刪除嗎？',
				() => {
					this.list.splice(index, 1);
				},
				() => {
					console.log('取消的事件');
				}
			);
		}
	}
};
</script>

<style scoped>
.chahao {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	height: 30rpx;
	width: 30rpx;
}
.tuqu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
}
.tukuang {
	height: 200rpx;
	width: 200rpx;
	margin-left: 20rpx;
	margin-top: 20rpx;
	position: relative;
}
.tukuang .tutu {
	height: 100%;
	width: 100%;
}
</style>