VUE:Select2

 

<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>"
  
})