【IMWeb训练营作业】Select组件

最新推荐文章于 2017-04-25 20:50:29 发布

zhenzhidaole

最新推荐文章于 2017-04-25 20:50:29 发布

阅读量207

点赞数

分类专栏： IMWeb训练营作业

本文链接：https://blog.csdn.net/zhenzhidaole/article/details/70340083

版权

IMWeb训练营作业专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>