Select组件

第二次作业，话不多说，代码如下：

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import select from '@/components/select'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'select',
      component: select
    }
  ]
})

App.vue

<template>
  <div id="app">
    <div class="box">
      <h2>自定义下拉框1-Select</h2>
      <router-view btn="Query" :list="list1"></router-view>
    </div>
    <div class="box">
      <h2>自定义下拉框2-Select</h2>
      <router-view btn="Search" :list="list2"></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'app',
    props: {
      list1: {
        default: ["Porsche","Lamborghini","Ferrari"]
      },
      list2: {
        default: ["保时捷","兰博基尼","法拉利"]
      }
    },
    methods: {
      changeValueHandle(value){
        this.val = value;
      }
    }
  }
</script>

components/select.vue

<template>
    <div>
        <section class="warp">
            <div class="searchIpt clearFix">
                <div class="clearFix">
                    <input type="text" class="keyWord" :value="val" @click="selectShow=!selectShow"/>
                    <input type="button" :value="btn" />
                    <span></span>
                </div>
                <ul class="list" v-show="selectShow" @receive="changeValueHandle">
                    <li v-for="item in list">{{item}}</li>
                </ul>
            </div>
        </section>
    </div>
</template>

<script>
    export default {
        name: 'select',
        data () {
            selectShow: false
        },
        props: {
            btn: {
                default: '查询'
            },
            list: {
                default: ["野马"]
            },
            val: {
                default: ""
            }
        },
        methods: {
          selectValueHandle(item){
            this.$emit("receive",item);
          }
        }

    }
</script>

<style scoped>
  @import './css/style.css';
</style>

效果图：