IMWeb训练营作业2-SELECT组件

来源：互联网发布：国画淘宝梅花挂客厅编辑：程序博客网时间：2024/06/06 11:44

运行效果图：
select运行效果图
核心代码:

<!doctype html><html><head><meta charset="utf-8"><title>select</title><script src="./vue.js"></script><link href="./main.css" rel="stylesheet" type="text/css"></head><body>    <div id="app">        <div class="appose">            <h2>自定义的下拉框1</h2>            <custom-select btn="查询" v-bind:list="list1"></custom-select>        </div>        <div class="appose">            <h2>自定义的下拉框2</h2>            <custom-select btn="搜索" v-bind:list="list2"></custom-select>        </div>    </div>    <script>        //注册组件        Vue.component("custom-select",{            data:function(){                return {                    selectShow:false,                    val:""                };            },            props:["btn","list"],            template:`                <section class="warp">                    <div class="searchIpt clearFix">                        <div class="clearFix">                            <input type="text" class="keyWord" :value="val"                            @click="selectShow = !selectShow"/>                            <input type="button" :value="btn"/>                            <span></span>                        </div>                        <custom-list v-show="selectShow" :list="list"                         v-on: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:["计算机网络","数据结构","数据库系统","微机原理","编译原理","算法分析与设计","高等数学","面向对象程序设计"]            }        });    </script></body></html>

CSS代码

/* CSS Document */body{    margin:0;    font-family:"微软雅黑";    color:#333;}ul,li{    margin:0;    padding:0;    list-style:none;}input{    outline:none;    cursor: pointer;}h2{    font-family:微软雅黑;    margin:0;    font-weight:normal;}.clearFix:after{    display: block;    content:'';    clear:both;}.appose{    float:left;    text-align:center;}.warp{    width: 348px;    margin:10px 100px 20px 100px;}.searchIpt{    position: relative;    width: 336px;    border:1px solid #3736ae;    padding:5px;    border-radius:10px;    background: #e4e4fe;}.searchIpt input{    line-height: 34px;    border-radius:10px;    font-family:微软雅黑;    color:#FFF;}.searchIpt input:nth-of-type(1){    float: left;    width: 228px;    padding-left: 40px;    border:1px solid #c9c9d5;    background: #d9d9e2;}.searchIpt input:nth-of-type(2){    float: right;    width: 58px;    height: 36px;    border:1px solid #fd635e;    background: #fd635e;}.searchIpt span{    position: absolute;    top:12px;    left: 15px;    width: 23px;    height: 23px;    background: url(img/select_search.png) no-repeat;}.searchIpt input:nth-of-type(1):focus{    background: #fff;    border-color:#fd635e;}.list{    margin-top:9px;}.list li{    margin:3px 0;    color:#333;    line-height: 30px;    padding-left: 16px;    width: 270px;    box-sizing:border-box;    border-radius:14px;}.list li.active,.list li:hover{    color:#fff;    background: #fd635e;    cursor: pointer;}

0 0