您的位置：首页 > 其它

IMWeb训练营作业 - select组件

2017-04-21 23:51 459 查看

代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<h2>自定义下拉框</h2>
<custom-select btn="查询" :list="list1"></custom-select>
</div>
<script>
/*var obj={
selectShow:false
}*/
//注册组件
Vue.component("custom-select",{
data:function(){
return {
selectShow:false,
val:""
};
},
props:["btn","list"],
template:`<section class="warp">
<div class="searchInt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" @click="selectShow = !selectShow" :value="val"/>
<input type="button" :value="btn">
<span></span>
</div>
<custom-list v-show="selectShow" :list="list" @receive="changeValueHandle"></custom-list>
</div>
</section>`,
methods:{
changeValueHandle(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){
this.$emit("receive",item);
}
}
})

new Vue({
el:"#app",
data:{
list1:["上海","北京","杭州"],
list2:["17-02","17-03","17-04"]
}
})
</script>
</body>
</html>

CSS：

*{padding: 0;margin: 0;}
html{margin:20px;}
.searchInt{width: 250px;border-radius: 20px;background: #e2e5fd;
padding: 3px;}
.searchInt>div.clearFix{height: 30px;}
.keyWord{height: 30px;width: 165px;border-radius: 20px;
background: #d7d9e2;float: left;padding-left: 30px;
border: 0;outline: none;}
.keyWord:focus{background: #fff;}
input[type = button]{background: #ff7159;color: #aa4033;
border-radius: 20px;float: right;height: 32px;
width: 50px;border: 0;outline: none;}
.clearFix{clear: both;}
.list{margin-top: 3px;}
.list li{list-style: none;height: 30px;width: 185px;
border-radius: 20px;padding-left: 10px;line-height: 30px;}
.list li:hover{background: #ff7159;}

github地址：传送门

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航