IMWeb训练营作业2-SELECT组件

最新推荐文章于 2017-04-23 17:04:33 发布

gongdiye2017

最新推荐文章于 2017-04-23 17:04:33 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/gongdiye2017/article/details/70481661

版权

运行效果图：
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;
}

gongdiye2017

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IMWeb训练营作业2-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> <d
复制链接

扫一扫