【IMWeb训练营作业】 - 作业2：Select

demo: http://hiijack.github.io/customselect/index.html

github: https://github.com/hiijack/vue-select

截图

核心代码：

CustomSelect.vue

<template>
    <div>
        <div class="searchBox">
            <input class="searchInput" type="text" placeholder="点一下" v-on:click="showList" v-bind:value="text"/>
        </div>
        <SelectList v-show="listShow" v-bind:list="listValue" v-on:changeValue="changeValue"></SelectList>
    </div>
</template>

<script>
import SelectList from './SelectList'
export default {
    name: 'customList',
    components: {
        SelectList
    },
    data() {
        return {
            listShow: false,
            text: '',
            listValue: ['vue', 'react', 'angular']
        }
    },
    methods: {
        showList() {
            this.listShow = true;
        },
        hideList() {
            this.listShow = false;
        },
        changeValue(val) {
            this.text = val;
            this.listShow = false;
        }
    }
}
</script>

<style scoped>
    .searchBox {
        border-width: 1px;
        border-style: solid;
        border-color: #ccc;
        width: 85%;
        display: inline-block;
    }
    
    .searchInput {
        float: left;
        width: 95%;
        height: 35px;
        margin: 3px 1px 0 15px;
        padding: 0 10px 0 0;
        font-size: 16px;
        outline: none;
        border: 0;
        box-sizing: content-box;
    }
    
</style>

SelectList.vue

    <template>
        <ul class="list-group">
            <li class="list-group-item" v-for="item of list" @click="selectItem(item)">
                <!--<a href='#' v-on:click="selectItem(item)">{{item}}</a>-->
                {{item}}
            </li>
        </ul>
    </template>
    <script>
    export default {
        name: 'SelectList',
        props: ['list'],
        methods: {
            selectItem(item) {
                this.$emit('changeValue', item);
            }
        }
    }
    </script>
    <style scoped>
        .list-group {
            margin: auto;
            width: 85%;
            padding-left: 0px;
        }
        
        .list-group-item {
            position: relative;
            display: block;
            padding: 10px 15px;
            margin-bottom: -1px;
            background-color: #fff;
            border: 1px solid #ddd;
        }
        
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        li {
            cursor: pointer;
            text-align: left;
            border: 0;
            border-collapse: collapse;
            border-spacing: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        li:hover {
            background-color: #ccc;
        }
    </style>