【IMWeb训练营作业】－－－Select－－－

来源：互联网发布：喜剧网络剧他大舅编辑：程序博客网时间：2024/05/29 06:37

效果图：

<body>
<div class="app">
<div style="float:left;">
<h2>自定义的下拉框1</h2>
<custom-selectbtn="查询" :list="list1"></custom-select>
</div>
<div style="float:left;">
<h2>自定义的下拉框2</h2>
<custom-selectbtn="go" :list="list2"></custom-select>
</div>
</div>
<script>
Vue.component("custom-select", {
data: function () {
return {
selectShow: false,
val: ""
};
},
props: ["btn","list"],
template: ` <section class="wrap">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="val" @click="selectShow=!selectShow"/>
<input type="button" :value="btn">
<span></span>
<custom-list v-show="selectShow" :list="list" @receive="changeValue"></custom-list>
</div>
</div>
</section>`,
methods: {
changeValue(value) {
alert("touched!" +value)
console.log(value)
this.val =value;
}
}

})
Vue.component("custom-list", {
props: ["list"],
template: ` <ul class="list">
<li v-for="item of list" @click="selectValue(item)">{{item}}</li>
</ul>`,
methods: {
selectValue: function (item) {
this.$emit("receive",item)

}
}
})

new Vue({
el: ".app",
data: {
list1: ["北京","上海", "深圳","广州", "杭州"],
list2: ["yes","no", "yeah","mygod", "fuck"],
},
})
</script>
</body>

0 0