-----------------------------------------
这个基本安老师的思路完成的
——————————————
html js 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>自定义select</title>
<link rel="stylesheet" type="text/css" href="./select.css">
<script type="text/javascript" src="./vue.js"></script>
</head>
<body>
<div id="app">
<div>
<h1>自定义下拉框1</h1>
<custom-select btns-value='查询' v-bind:list='list1'></custom-select>
</div>
<div>
<h1>自定义下拉框2</h1>
<custom-select btns-value='检索' v-bind:list='list2'></custom-select>
</div>
</div>
<script type="text/javascript">
//注册组件
Vue.component("customSelect",{
data:function(){
return {
selecshow:false,
val:"",
};
},
props:['btnsValue','list'],
template: '<section><div class="searchInput" @click="selecshow=!selecshow" ><input type="text" class="keyWord" :value="val" /><input type="button" class="btn" :value="btnsValue"/> </div><custom-list v-show="selecshow" :list="list" v-on:receved="changeval"></custom-list></section>',
methods:{
changeval:function(value){
this.val=value;
}
}
});
Vue.component("custom-list",{
props:['list'],
template:'<ul class="list" ><li v-for="item of list" @click="selected(item)">{{item}}</li></ul>',
methods:{
selected:function(item){
//需要自定义事件
this.$emit('receved',item);
}
}
});
new Vue({
el:"#app",
data:{
list1:['北京','上哈','广州','西安'],
list2:['三月','四月','五月','六月'],
},
})
</script>
</body>
</html>
css
body{padding: 0;margin: 0;}
input,ul,li,div{padding: 0;margin: 0;}
ul,li {list-style-type: none}
#app {width: 800px; margin: 40px auto;}
/*#app div {width: 400px; float: left;}
#app div */
#app .searchInput {overflow: hidden;}
#app .searchInput .keyWord {width: 250px; height: 35px; border: 1px solid #ccc; border-radius: 6px; float: left;}
#app .searchInput .btn {width:50px; height: 35px; float: left; }
#app .list { width: 252px; }
#app .list li {display: block; width: 240px; padding-left:10px; height: 30px; line-height: 30px; }
#app .list li:hover { border-radius: 6px; background-color: red;}
-------------------------
效果