IMWeb训练营作业——select组件_html 可编辑的select 组件demo-CSDN博客

本文链接：https://blog.csdn.net/Wendy_1510/article/details/70383374

本次作业以组件的形式完成了下拉菜单的功能。

具体代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="vue.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css"/>
    <title>customer_select</title>
</head>
<body>
<div id="app">
    <customer-select btn-value="查询"  v-bind:list="list1"></customer-select>
    <customer-select btn-value="搜索"  v-bind:list="list2"></customer-select>
</div>
<script>
    Vue.component("customer-select",{
        data:function(){
            return {
                selectShow:false,
                val:""
            }
        },
        props:["btnValue","list"],
        template:`
        <div class="wrap">
            <div class="searchIpt">
                        <div class="clearFix">
                             <input class="keyWords" type="text" :value="val"
                             @click="selectShow=!selectShow"
                             />
                             <input class="go" type="button" :value="btnValue"/>
                             <span></span>
                        </div>
                        <div class="list" v-show="selectShow" @click="selectShow=!selectShow" >
                            <list-show v-bind:list="list" v-on:receive="selectValueHandle"
                            ></list-show>
                        </div>
            </div>
        </div>`,
        methods:{
            selectValueHandle:function(value){
                this.val=value;
            }
        }
    });
    Vue.component("list-show",{
                props:["list"],
                template:`<ul>
                 <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:["html+css","html5+css3","javascript","angular","react","vue","jquery","nodejs"],
            list2:["17-01-23","17-02-20","17-03-11","17-04-03"]
        }
    });
</script>
</body>
</html>