【IMWel训练作业】vue select component

html代码

<div id="app">
      <h2>custom select</h2>
      <custom-select btn-value="search" v-bind:list="list1"></custom-select>
      <h2>custom select2</h2>
      <custom-select btn-value="search2" v-bind:list="list2"></custom-select>
</div>

JavaScript代码

  Vue.component("custom-select",{
      data:function(){
        return {
          selectShow:false,
          val:""
        }
      },
      props:["btnValue","list"],
      template:`<section class="warp">
                  <div class="searchIpt clearFix">
                    <div class="clearFix">
                      <input type="text" class="keyWord" v-bind:value="val" v-on:click="selectShow=!selectShow">
                      <input type="button" v-bind:value="btnValue">
                      <span></span>
                    </div>
                    <custom-list v-show="selectShow" v-bind:list="list" v-on:receive="changeValueHandle"></custom-list>
                  </div>
              </section>`,
      methods:{
        changeValueHandle:function(value){
          this.val = value;
        }
      }
    });
    Vue.component("custom-list",{
      props:["list"],
      template:`<ul class="list">
                  <li v-for="item of list" v-on:click="selectValueHandle(item)">{{ item }}</li>
              </ul>`,
      methods:{
        selectValueHandle:function(item){
          this.$emit("receive",item);
        }
      }
    })

      new Vue({
        el:"#app",
        data:{
          list1:["Beijing","Shanghai","Hangzhou"],
          list2:["17-04-20","17-04-21","17-04-22"]
        }
      })

样式简单的添加了点，就不贴出来了，最后来一张效果图

github地址：https://github.com/Wangtaidong/vue-study/tree/master/vue_component