使用Vue及自定义组件完成10X10图片表格的点击效果

最新推荐文章于 2024-05-30 16:11:37 发布

佳佳军

最新推荐文章于 2024-05-30 16:11:37 发布

阅读量42

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2201_75873335/article/details/129674495

版权

步骤过程：先在ps中切割图片，导入图片并链接js，用弹性布局定位图片，最后使用组件实现点击效果

1.html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--引入js-->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="content">
				<!--通过v-for循环图片-->
				<test-div v-for="i in imgs" :im="i"></test-div>
			</div>
		</div>
		<!--template作为模板定义组件-->
		<template id="temp">
			<!--完成点击效果-->
			<div class="item" @click="change" >
				<!--v-show实现点击盒子-->
				<img :src="im" v-show="show" />
			</div>
		</template>

2.css部分

<style type="text/css">
			.content {
				width: 850px;
				border: 1px solid pink;
				margin: 0 auto;
				/*使用弹性布局*/
				display: flex;
				/*元素排列方式*/
				justify-content: space-around;
				/*自动换行*/
				flex-wrap: wrap;
			}
			/*调整图片大小间距*/
			.item {
				width: 80px;
				height: 45px;
				margin: 2px 0px;
				background-color: greenyellow;
			}

			img {
				width: 80px;
				height: 45px;
			}
		</style>

3.自定义组件

<script>
			//定义一个组件
			Vue.component("test-div", {
				template: '#temp',
				//创建一个自定义属性
				props: ["im"],
				data: function() {
					return {
						show: true,
						img:"img/images/R-C_01.jpg"
					}
				},
				//通过methods定义的方法实现图片点击时隐藏和显示的效果
				methods: {
					change: function() {
						//
						this.show = !this.show
					}
				}
			});

4.Vue实例化

var vm = new Vue({
				el: "#app",
				//存储图片，循环输出图片
				data: {
					imgs: ["img/images/R-C_01.jpg",
"img/images/R-C_02.jpg",
"img/images/R-C_03.jpg",
"img/images/R-C_04.jpg",
"img/images/R-C_05.jpg",
"img/images/R-C_06.jpg",
"img/images/R-C_07.jpg",
"img/images/R-C_08.jpg",
"img/images/R-C_09.jpg",
"img/images/R-C_10.jpg",
"img/images/R-C_11.jpg",
"img/images/R-C_12.jpg",
"img/images/R-C_13.jpg",
"img/images/R-C_14.jpg",
"img/images/R-C_15.jpg",
"img/images/R-C_16.jpg",
"img/images/R-C_17.jpg",
"img/images/R-C_18.jpg",
"img/images/R-C_19.jpg",
"img/images/R-C_20.jpg",
"img/images/R-C_21.jpg",
"img/images/R-C_22.jpg",
"img/images/R-C_23.jpg",
"img/images/R-C_24.jpg",
"img/images/R-C_25.jpg",
"img/images/R-C_26.jpg",
"img/images/R-C_27.jpg",
"img/images/R-C_28.jpg",
"img/images/R-C_29.jpg",
"img/images/R-C_30.jpg",
"img/images/R-C_31.jpg",
"img/images/R-C_32.jpg",
"img/images/R-C_33.jpg",
"img/images/R-C_34.jpg",
"img/images/R-C_35.jpg",
"img/images/R-C_36.jpg",
"img/images/R-C_37.jpg",
"img/images/R-C_38.jpg",
"img/images/R-C_39.jpg",
"img/images/R-C_40.jpg",
"img/images/R-C_41.jpg",
"img/images/R-C_42.jpg",
"img/images/R-C_43.jpg",
"img/images/R-C_44.jpg",
"img/images/R-C_45.jpg",
"img/images/R-C_46.jpg",
"img/images/R-C_47.jpg",
"img/images/R-C_48.jpg",
"img/images/R-C_49.jpg",
"img/images/R-C_50.jpg",
"img/images/R-C_51.jpg",
"img/images/R-C_52.jpg",
"img/images/R-C_53.jpg",
"img/images/R-C_54.jpg",
"img/images/R-C_55.jpg",
"img/images/R-C_56.jpg",
"img/images/R-C_57.jpg",
"img/images/R-C_58.jpg",
"img/images/R-C_59.jpg",
"img/images/R-C_60.jpg",
"img/images/R-C_61.jpg",
"img/images/R-C_62.jpg",
"img/images/R-C_63.jpg",
"img/images/R-C_64.jpg",
"img/images/R-C_65.jpg",
"img/images/R-C_66.jpg",
"img/images/R-C_67.jpg",
"img/images/R-C_68.jpg",
"img/images/R-C_69.jpg",
"img/images/R-C_70.jpg",
"img/images/R-C_71.jpg",
"img/images/R-C_72.jpg",
"img/images/R-C_73.jpg",
"img/images/R-C_74.jpg",
"img/images/R-C_75.jpg",
"img/images/R-C_76.jpg",
"img/images/R-C_77.jpg",
"img/images/R-C_78.jpg",
"img/images/R-C_79.jpg",
"img/images/R-C_80.jpg",
"img/images/R-C_81.jpg",
"img/images/R-C_82.jpg",
"img/images/R-C_83.jpg",
"img/images/R-C_84.jpg",
"img/images/R-C_85.jpg",
"img/images/R-C_86.jpg",
"img/images/R-C_87.jpg",
"img/images/R-C_88.jpg",
"img/images/R-C_89.jpg",
"img/images/R-C_90.jpg",
"img/images/R-C_91.jpg",
"img/images/R-C_92.jpg",
"img/images/R-C_93.jpg",
"img/images/R-C_94.jpg",
"img/images/R-C_95.jpg",
"img/images/R-C_96.jpg",
"img/images/R-C_97.jpg",
"img/images/R-C_98.jpg",
"img/images/R-C_99.jpg",
"img/images/R-C_100.jpg",

					]

				}
			})
		</script>

	</body>
</html>

最后看下图片效果吧