vue中实现图片点击进行编号简易版

最新推荐文章于 2023-12-04 19:43:49 发布

壹万年太久

最新推荐文章于 2023-12-04 19:43:49 发布

阅读量338

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ji4396/article/details/108538684

版权

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	   body,html,div,ul,li{
		 margin: 0;
		 padding: 0;
	   }
	   .container{
	   	width: 100%;
	   	height: 960px;
		padding: 4px;
	   	display: flex;
	   	flex-direction: column;
	   	flex-wrap: wrap;
	   	margin: auto;
	   	counter-reset: items;
	   }
	   .item-box{
	   	position: relative;
	   	width: 18%;
	   	margin: 2px 0;
	   	border-radius: 4px;
	   	overflow: hidden;
		cursor: pointer;
	   }
	   .item-box:hover::after{
	   	color: transparent;
	   	background-color: rgba(0,0,0,0);
	   }
	   .item-box::after{
	   	position: absolute;
	   	top: 0;
	   	left: 0;
	   	width: 100%;
	   	height: 100%;
	   	display: flex;
	   	align-items: center;
	   	justify-content: center;
	   	counter-increment: items;
	   	/* content: counter(items); */
	   	font-size: 30px;
	   	color: #ccc;
	   	font-weight: bolder;
	   	background-color: rgba(0,0,0,0.3);
	   	transition: color 0.3s ease ,background-color 0.3s ease;  
	   }
	   
	   .item-box .bg{
	   	width: 100%;
	   	padding-bottom: 100%;
	   }
	   .item-box .bg img{
	   	display: block;
	   	width: 100%;
	   	height: 100%;
	   	object-fit: cover;
	   	position: absolute;
	   	top: 0;
	   	left: 0;
	   }
	   .item-box:nth-of-type(3n) .bg{
	   	padding-bottom: 120%;
	   }
	   .item-box:nth-of-type(4n) .bg{
	   	padding-bottom: 140%;
	   }
	   .item-box:nth-of-type(5n+1){
	   	order: 1;
	   }
	   .item-box:nth-of-type(5n+2){
	   	order: 2;
	   }
	   .item-box:nth-of-type(5n+3){
	   	order: 3;
	   }
	   .item-box:nth-of-type(5n+4){
	   	order: 4;
	   }
	   .item-box:nth-of-type(5n+5){
	   	order: 5;
	   }
	   .tip{
		   position: absolute;
		   top: 0px;
		   right: 0px;
		   width: 40px;
		   height: 40px;
		   text-align: center;
		   line-height: 40px;
		   background:red;
		   border-radius: 4px;
	   }
	</style>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
	<div id="app">
		<div class="container">
			<div class="item-box" v-for="(item,index) in arr" :key='item.radom' @click="numChange(index,item.radom)">
				<div class="bg">
					<img :src=`https://picsum.photos/360/${item.height}?radom=${item.radom}` alt='' >
					<div class="tip" v-if="item.show">
						{{item.num}}
					</div>
				</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
		const app = new Vue({
			el:'#app',
			data:{
				arr:[
					{height:360,radom:1,show:false,num:0, },{height:860,radom:2,show:false,num:0, },
					{height:460,radom:3,show:false,num:0, },{height:260,radom:8,show:false,num:0, },
					{height:560,radom:4,show:false,num:0, },{height:560,radom:9,show:false,num:0, },
					{height:260,radom:5,show:false,num:0, },{height:390,radom:10,show:false,num:0, },
					{height:160,radom:6,show:false,num:0, },{height:310,radom:11,show:false,num:0, },
					{height:660,radom:7,show:false,num:0, },{height:460,radom:12,show:false,num:0, },
				],
				dataArr:[]
			},
			methods:{
				numChange(index,id){
					let _this = this;
					this.arr[index].show = !this.arr[index].show
					let showPicArr = this.arr.filter(item=>{
						return item.show
					})
					
					/* 判断当前点击数字是否是最大  */
					function isMax(id){
						/*点击的数字*/
						let num = _this.arr.filter(v=>v.radom==id)[0].num
						let flag = true
						for(let i = 0 ;i<_this.arr.length ; i++){
							if(_this.arr[i].num>num&&_this.arr[i].show){
								flag = false
							}
						}
						return flag
					}
					
					if(!this.arr[index].show){
						//处理数字回退的情况
						let num = _this.arr.filter(v=>v.radom==id)[0].num
						
						this.arr.forEach(v=>{
							/*1.点击数字不为1 2.点击数字不是最大值可以减 3.点击数字有比它大的 减去后面的 */
							if(!isMax(id)&& v.num!=1&&v.num>num){
								v.num-=1
							}
						})
						
						let i = this.dataArr.findIndex(v=>{
							return v.radom == id
						})
					    this.dataArr.splice(i,1)
						
					}else{
						//赋值  正常数字+的情况
						this.dataArr.push(this.arr[index])
						this.arr[index].num = showPicArr.length
					}
				}
			},
		})
</script>

壹万年太久

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中实现图片点击进行编号简易版

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> body,html,div,ul,li{ margin: 0; padding: 0; } .container{ width: 100%; height: 960px; pa
复制链接

扫一扫