IMWeb训练营作业

来源：互联网发布：广州c语言培训机构编辑：程序博客网时间：2024/05/18 01:10

代码：

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地址：传送门

1 0