[IMWeb训练营作业]vue实现自定义select下拉框组件

运行效果图:


HTML:

<div id="app">
    <div class="fl">
        <h2>自定义的下拉框</h2>
        <custom-select btn-value="查询" v-bind:list="list1"></custom-select>
    </div>

    <div class="fl">
        <h2>第二个下拉框</h2>
        <custom-select btn-value="go" v-bind:list="list2"></custom-select>
    </div>
</div>
JS:

Vue.component( "custom-select",{         //可小驼峰可烤串
        data:function(){                     //data为function,返回私有对象
            return {
                selectShow:false,
                val:''
            };
        },
        props:["btnValue",'list'],                  //此处必须(小)驼峰
       template:`<section class="list">
            <div class="searchIpt">
            <div class="clearFix">
            <input type="text" @click="selectShow = !selectShow" :value="val">
            <input type="button" v-bind:value="btnValue">
            <span></span>
            </div>
            <custom-list v-show="selectShow" v-bind:aaa="list" v-on:receive="changeValueHandle"
            ></custom-list>
            </div>
            </section>`,
        methods:{
            changeValueHandle(item){
                this.val=item;    //需要this
            }
        }

    })
    Vue.component('custom-list',{
        props:["aaa"],                        //传自定义属性名
        template:`<ul>
               <li v-for="item of aaa" @click="selectValueHandle(item)">{{item}}</li>
            </ul>`,
        methods:{
            selectValueHandle(item){
                this.$emit('receive',item)   //$emit告诉父级发生的(自定义)事件,v-on在父组件绑定(自定义)事件
            }
        }
    })
    var data = {
        list1:['吃饭','睡觉','剁手'],
        list2:['111','123','233']
    }
    new Vue({
       el:'#app',
        data:data/* {
            list1:['吃饭','睡觉','剁手'],
            list2:['111','123','233']
        }*/
    })




发布了12 篇原创文章 · 获赞 7 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览