Select组件

来源：互联网发布：德军步兵班知乎编辑：程序博客网时间：2024/06/01 08:40

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

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>

效果图：
这里写图片描述

0 0