【IMWeb训练营作业】vue component custom-select

【IMWeb训练营作业】custom-select

---

7组 - kangkai

demo展示

demo: http://kangkai-fe.github.io/demo/vue/custom-select/
github: https://github.com/KangKai-fe/demo/tree/master/IMWeb/vue/custom-select

html 代码

<div id="app">    <section class="container">        <h3>列表一</h3>        <custom-select :list="listOne.list" :btn="listOne.btn"></custom-select>    </section>    <section class="container">        <h3>列表二</h3>        <custom-select :list="listTwo.list" :btn="listTwo.btn"></custom-select>    </section></div>

javascript 代码

//注册组件Vue.component("custom-select", {    props: ['btn', 'list'],    data: function () {        return {            listShown: false,            searchValue: ''        }    },    template: `<div class="searchIpt clearFix">                <div class="clearFix">                    <input placeholder="点击查询" type="text" class="keyWord"                        :value="searchValue"                        @focus="listShown = !listShown"                    />                    <input type="button"                        :value="btn"                        @click="listShown = !listShown"                    />                </div>                <custom-list                    :list="list"                    @listClicked="listClickedHandler"                    v-show="listShown"                ></custom-list>            </div>`,    methods: {        listClickedHandler(value) {            this.listShown = false;            this.searchValue = value;        }    }});Vue.component('custom-list', {    props: ['list'],    template: `<ul class="list">                <li                    v-for="item in list"                    @click="listClicked(item)"                >{{ item }}</li>            </ul>`,    methods: {        listClicked(value) {            this.$emit('listClicked', value);        }    }})new Vue({    el: "#app",    data: {        listOne: {            btn: '城市',            list: ['北京', '上海', '广州', '石家庄']        },        listTwo: {            btn: 'Vue',            list: ['vue', 'vue-router', 'vuex', 'vue-cli']        }    }})