IMWeb训练营作业--VUE练习2--select组件

 IMWeb训练营作业--VUE练习2--select组件练习

当然，以下内容还是得基于Vue.js制作

首先是CSS代码部分，本次样式非常简单，所有样式方面写的不多：

		ul,li{padding: 0;margin: 0;list-style: none;}
		.fl{float: left;}
		.warp{width: 350px;}
		.searchIpt .keyWord{border:1px solid #ccc; border-radius: 5px; width: 250px;height: 25px;text-indent: 10px;outline: none;}
		.searchIpt input[type="button"]{border:1px solid #ccc; border-radius: 5px; width: 50px;height: 29px;outline: none;cursor:pointer;}
		ul.list{padding: 10px 0;border: 1px solid #efefef;width: 250px;}
		ul.list li{border-radius: 5px; padding-left: 10px; width: 240px; height: 25px;line-height: 25px;}
		ul.list li:hover{background-color: #efefef;cursor:pointer;}

然后是HTML部分代码：

	<div id="app">
		<div class="fl">
			<h2>自定义的下拉框-查询</h2>
			<custom-select btn-value="查询" v-bind:list="list1"></custom-select>
		</div>
		<div class="fl">
			<h2>自定义的下拉框-搜索</h2>
			<custom-select btn-value="搜索" v-bind:list="list2"></custom-select>
		</div>
	</div>

接下来是JS部分的代码：

		var obj={
			selectShow:false
		}
		// 注册（父）组件
		Vue.component("custom-select",{
			data:function(){
				return {
					selectShow:false,
					val:''
				};
			},
			props:["btnValue","list"],
			template:`<section class="warp">
						<div class="searchIpt">
							<div>
								<input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
								<input type="button" :value="btnValue">
								<span></span>
							</div>
							<custom-list v-show="selectShow" :list="list" v-on:receive="changeValueHandle"></custom-list>
						</div>
					</section>`,
					methods:{
						changeValueHandle(value){
							// 触发选中参数的值
							// alert(value);
							this.val = value;
						}
					}
		})

		// 注册（子）组件，列表相关
		Vue.component("custom-list",{
			props:["list"],//传值，列表内容信息
			template:`<ul class="list">
					<li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
				</ul>`,
			methods:{
				selectValueHandle:function(item){
					// 在子组件中有交互（要把这里获取的值，传至上一层组件中使用）
					// 告知父级，改变Val值，需要触发一个自定义事件
					this.$emit("receive",item);
				}
			}
		})

		new Vue({
			el:"#app",
			data:{
				list1:["北京","上海","杭州"],
				list2:["17-02-09","17-02-16","17-04-09"]
			}
		})

最后，以下是本次小DEMO的效果图