vue练手小项目--眼镜在线试戴

Posted 2020-10-09 凉宫

最近看到了一个眼镜在线试戴小项目使用纯js手写的，本人刚学习vue.js没多久，便试试用vue做做看了，还没完善。

其中包括初始图片加载，使用keywords查找，父子组件之间传递信息，子组件之间传递信息

1. 使用keywords查找

     1.1 给每个li添加初始data

smallImg: [
　　{
　　　　keywords: "椭圆脸",
　　　　src: "images/model_1.jpg",
　　　　addClass: false
　　},
　　{
　　　　keywords: "圆形脸",
　　　　src: "images/model_2.jpg",
　　　　addClass: false
　　},

　　...

]

　1.2 添加方法

// 搜索脸型
addCurrent: function (index){
	// li样式添加
	this.faceType[index].isTrue=true;
	this.faceType[this.oldIndex].isTrue=false;
	this.oldIndex=index;

	// 搜索脸型
	var type=this.faceType[index].type;
	this.smallImg.forEach(function (val,index){
		// 先都不加class
		val.addClass=false;
		// 若关键字不等于脸型则添加class
		if(val.keywords!=type){
			val.addClass=true;
		}
	});
	// 点击全部，则所有的都不添加class
	if(index==0){
		this.smallImg.forEach(function (val,index){
			// 先都不加class
			val.addClass=false;
		});
	}
}

2. 子组件向父组件发送数据

　　2.1 点击任意眼镜触发showGlass()事件

<script type="text/template" id="galsslist">

	<div class="galsslist">
		<ul class="clearfix">
			<li v-for="(val,index) in glass" @click="showGlass(index)" v-if="val.show">
				<img :src="val.src" >
				<h4>{{ val.title }}</h4>
				<p>{{ val.text }}</p>
			</li>
		</ul>
	</div>
</script>

　　2.2 子组件发射togg()事件到父组件，并传递点击的index值  

showGlass: function (index){
　　　　this.$emit("togg",index);
},

　　2.3 父组件自定义事件

<!-- 自定义事件，子组件向父组件发送数据 -->
<galsslist @togg="showBig"></galsslist>

　　2.4 执行showBig()事件，佩戴选择的眼镜

showBig: function (index){
	this.bigGlassImg="images/glass_"+(index+1)+".png";
	this.showbigGlassImg=true;
}

3. 子组件之间传递信息

   3.1 先在index的data中定义  bus: new Vue(),

   3.2 点击搜索在子组件触发search事件，发射事件 sear(), 并传递sendMsg信息

// 向另一个组件传递信息
search: function (){
	var sendMsg=this.toggArr[0].msg;
	this.$root.bus.$emit("sear",sendMsg);
}

　3.3 执行事件sear()，并修改this.searchKey,并触发searchKeywords()事件

// 接收另一组件传递的信息
created: function (){
	var self=this;
	this.$root.bus.$on("sear",function (val){
		self.searchKey=val;
		self.searchKeywords();
	})
},
beforeDestory: function (){
	this.$root.bus.$off("sear");
}

　3.4 显示与之匹配的眼镜

searchKeywords: function (){
	this.glass.forEach(function (val,index){
		// 先全部显示
		val.show=true;
		var key=val.title.split("_")[0];
		// key不相等，则隐藏
		if(key!=this.searchKey){
			val.show=false;
		}
	},this);
	// 为全部则全部显示
	if(this.searchKey=="全部"){
		this.glass.forEach(function (val,index){
			// 全部显示
			val.show=true;
		});
	}
}

4. github地址 （https://github.com/hsiangleev/proj-eyeglass.git）