zoukankan      html  css  js  c++  java
  • 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;
    	 30rpx;
    }
    .tuqu {
    	display: flex;
    	flex-direction: row;
    	flex-wrap: wrap;
    	align-items: flex-start;
    	justify-content: flex-start;
    }
    .tukuang {
    	height: 200rpx;
    	 200rpx;
    	margin-left: 20rpx;
    	margin-top: 20rpx;
    	position: relative;
    }
    .tukuang .tutu {
    	height: 100%;
    	 100%;
    }
    </style>
    

      

  • 相关阅读:
    自介
    打招呼
    试验四
    作业:实验二
    个人简介
    实验4
    构建之法—心得体会
    作业:实验二
    个人简介
    软件测试第四次博客作业2
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/14119391.html
Copyright © 2011-2022 走看看