<template>

    <div>

        <ul class="skill">

            <li v-for='item of list' v-on:click='selectLi(item)'>{{item}}</li>

        </ul>

    </div>

</template>

<script>

export default {

    name:'myul',

    props: ['list'],

    methods: {

        selectLi: function(item) {

        //$emit触发当前实例上的自定义事件 receive

        this.$emit('receive', item);

        }

    }

}

</script>

<style>

    ul, li {

        margin: 0;

        padding: 0;

        list-style: none;

    }

    .skill li {

        font-size: 18px;

        line-height: 2rem;

        height: 2rem;

        padding-left: 5px;

        cursor: pointer;

    }

    .skill li:hover {

        background-color: #008b45;

    }

</style>

<template>

    <div>

        <div id="selectWrap">

        <div class="searchBox">

            <input type="text" :value="selectVal" @click='ulShow = !ulShow'/>

            <a href="#" rel="external nofollow" class="search" v-text='btnName'></a>

        </div>

        <div>

            <myul v-show='ulShow' v-bind:list='list' v-on:receive='changeVal'></myul>

        </div>

    </div>

</template>

<script>

import Vue from 'vue'

import myul from './myul'

Vue.component("myul", myul)

export default {

    name:'myselect',

    data() {

        return {

        ulShow: false, //默认ul不显示，单击input改变ul的显示状态

        selectVal: '' //选项值，input的值与选项值动态绑定

        }

    },

    props: ['btnName', 'list'],

    methods: {

        changeVal(value) {

            this.selectVal = value

        }

    }

}

</script>

<style>

    #selectWrap {

        width: 250px;

        padding: 2rem;

        background: #4682b4;

    }

    .searchBox input, .searchBox a {

        line-height: 1.5rem;

        height: 1.5rem;

        margin-bottom: 1rem;

        padding: 0 5px;

        vertical-align: middle;

        border: 1px solid #aaa;

        border-radius: 5px;

        outline: none;

    }

    .searchBox a {

        display: inline-block;

        text-decoration: none;

        background-color: #b1d85c;

    }

</style>

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import myselect from './myselect'

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  data: {

    data1: ['CSS', 'HTML', 'JavaScript']

  },

  components: {myselect},

  template: "<myselect btn-name='search' v-bind:list='data1' style='float: left;margin-right: 2rem;'></myselect>"

})