【IMWeb训练营作业】Select组件

来源：互联网发布：数字矩阵切换器包含编辑：程序博客网时间：2024/06/05 10:33
demo效果展示
代码
<body>    <div id="demo">    <custom-select :searchtext="searchtext" :listdata="list"></custom-select>    </div>    <script>        Vue.component('customSelect',{            data:function(){                return {                    showlist:false,                    value:''                }            },            props:['searchtext','listdata'],            template:`<section class="warp">                        <div class="searchIpt clearFix">                            <div class="clearFix">                                <input type="text" class="keyWord" :value="value" />                                <input type="button" :value="searchtext"                                @click="showlist = !showlist">                                <span></span>                            </div>                            <customList v-show="showlist" @showinput="showinput" :items="listdata"></customList>                        </div>                    </section>`,            methods:{                showinput:function(item){                    this.value = item;                }            }        });        Vue.component('customList',{            props:["items"],            template:`<ul class="list">            <li v-for="item in items" @click="showitem(item)">{{item}}</li>                            </ul>`,            methods:{                showitem:function(item){                    this.$emit('showinput',item)                }            }        });        new Vue({            el:'#demo',            data: {                searchtext:"查询",                list:['vue.js','angular.js','react.js']            }        })    </script></body>
0 0