Vue.js 仿 Select 下拉框

废话少说，直接上图上代码：

效果图：

HEML：

<div id="demo">
    
    <h2 class="title">自定义下拉框</h2>
    <imitate-select h2-value="第一个 Select" v-bind:list="list1"></imitate-select>

    <h2 class="title">自定义下拉框</h2>
    <imitate-select h2-value="第二个 Select" v-bind:list="list2"></imitate-select>

</div>

Javascript：

<script>
    // 注册组件【 全局 】
    Vue.component('imitate-select', {
        data: function(){   // 给每一个添加一个自己的对象
            return {
                selectShoe: false,
                val: ''
            }
        },
        props: ['h2Value', 'list'],    // 这里的名称一定是驼峰式【如：上面是 h2-value（上面可以是烤串或驼峰式） ，下面必须是 h2Value】
        template: `<section class="main">
                        <div class="select">
                            <h2 class="fuzhi">{{ h2Value }}</h2>
                            <div class="select_header">
                                <input type="text" class="select_input" placeholder="模仿Select下拉框" @click="selectShoe = !selectShoe" :value="val" ><i></i>
                            </div>
                            <select-list v-show="selectShoe" :list="list" @receive="changeHandle"></select-list>
                        </div>
                    </section>`,
        methods: {
            changeHandle(value){   // 自定义事件
                // alert('我被触发了！值为：' + value)
                this.val = value
            }
        }
    });

    Vue.component('select-list', {
        props: ['list'],
        template: `<ul class="select_list">
                      <li v-for="item of list" @click="selectHandle(item)">{{ item }}</li>
                  </ul>`,
        methods: {
            selectHandle: function (item){
                this.$emit('receive', item)
            }
        }
    });

    new Vue({
        el: '#demo',
        data: {
            list1: ['HTML','CSS','Javascript','Vue.js'],
            list2: ['PHP','JAVA','C++','.NET']
        }
    })
</script>

Y(^_^)Y < END > Y(^_^)Y