自己封装一个下拉列表

// html:

<header>
      <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
</header>

data(){
    selectData: {
              defaultIndex: 0,//默认选中是第几个
              selectStatus: false,//通过这个来控制下拉框的显示和隐藏
              selectOptions: []//下拉框中的数据
     },
}

onChangeOption(index, id,houseName) {
            //header 选择下拉的列表
            this.selectData.defaultIndex = index ;
            this.houseId = id ;
            this.houseName = houseName ;
},

 created(){
          const that = this ;
       this.postRequest(‘‘, {}, function (data) {    // 此请求的封装方式，请查看上上一篇axios的封装
            that.houseId = data[0].projectId ;         // 初始化默认第一个
            that.houseName = data[0].projectName ;
            let arr = [] ;
            data.forEach((val)=>{
            arr.push({
              ‘houseId‘:val.projectId,
              ‘houseName‘:val.projectName
            })
            })
            that.selectData.selectOptions = arr
          })
        },

// 封装oSelect组件

<template>
  <div>
    <div class="select-box" @click="changeStatus">
      <h5 class="select-title"  v-if="selectData.selectOptions.length>0" :name="selectData.selectOptions[selectData.defaultIndex].houseName" :class="{‘select-title-active‘: selectData.selectStatus}">
        {{selectData.selectOptions[selectData.defaultIndex].houseName }}
      </h5>
      <transition name="slide-down">
        <ul class="select-options" v-show="selectData.selectStatus">
          <li class="select-option-item" v-for="(item,index) in selectData.selectOptions" @click="emitOption(index,item.houseId,item.houseName,item.accountCode,item.sysUrl,item.pkHouse)" :class="{‘select-option-active‘:selectData.defaultIndex===index}">
            {{ item.houseName }}
          </li>
          <div class="arrow-top"></div>
        </ul>
      </transition>
    </div>
  </div>
</template>

<script>
  export default{
    name:‘oSelect‘,
    props:{
      selectData:{
        type:Object,
        default:function () {
          return {}
        }
      }
    },
    methods:{
      emitOption(index,id,name,accountCode,sysUrl,pkHouse){
        this.$emit(‘changeOption‘,index,id,name,accountCode,sysUrl,pkHouse);
//                console.log(index)
      },
      changeStatus(){
        this.selectData.selectStatus=!this.selectData.selectStatus
      }
    }
  }
</script>

<style>
  .select-box{
    position: relative;
    /*max-width: 250px;*/
    width:100%;
    line-height: 55px;
    /*margin: 50px auto;*/
    /*border-bottom:1px solid #d8dce5;*/
  }
  .select-title{
    position: relative;
    padding: 0 30px 0 10px;
    /*border: 1px solid #d8dce5;*/
    border-radius: 5px;
    transition-duration: 500ms;
    cursor: pointer;
    font-size:32px;
    font-weight: 400;
    color:#333;
    text-align: left;
  }
  /*向下的三角*/
  .select-title:after{
    content: ‘‘;
    position: absolute;
    height: 0;
    width: 0;
    border-top: 16px solid #d70b19;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    right: 9px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
  }
  .select-title-active{
    border-color: #409eff;
  }
  /*先向上的箭头*/
  .select-title-active:after{
    transform: rotate(-180deg);
    border-top-color: #d70b19;
  }
  .select-options{
    position: absolute;
    /*padding:10px 0;*/
    /*top: 85px;*/
    border:1px solid #d8dce5;
    width: 100%;
    border-radius: 5px;
    /*将整个ul的背景颜色变成白色*/
    background-color:#fff;
    box-shadow: 1px 4px 2px 2px #cdcdcd;
    z-index: 999;
  }
  .select-option-item{
    padding:0 10px;
    cursor: pointer;
    transition-duration: 300ms;
    text-align: left;
    color:#999;
  }
  .select-option-item:hover,.select-option-active{
    background: #f1f1f1;
    /*color: #409eff;
    */
    color: #d70b19;
  }
  /*箭头css*/
  .arrow-top{
    /*position: absolute;
    height: 0;
    width: 0;
    /*top: -7px;*/
    /*border-bottom: 20px solid #409eff;*/
    /*#d8dce5*/
    /*border-left: 20px solid transparent;*/
    /*/*border-right: 20px solid transparent;*/
    /*left: 0;
    right: 0;*/
    /*margin: auto;
    z-index: 99;*/
  }
  /*点击之后的向上的三角*/
  /*.arrow-top:after{
   content: ‘‘;
   position: absolute;
   display: block;
   height: 0;
   width: 0;
   border-bottom: 20px solid #409eff;
   border-left: 20px solid transparent;
   border-right: 20px solid transparent;
   right: 5px;
   top: -55px;
   z-index: 99;
  }*/
  /*下拉框显示隐藏动画*/
  .slide-down-enter-active,.slide-down-leave{
    transition: all .3s ease-in-out;
    transform-origin:0 top;
    transform: scaleY(1);
  }
  .slide-down-enter{
    transform: scaleY(0);
  }
  .slide-down-leave-active{
    transition: all .3s ease-in-out;
    transform-origin:0 top;
    transform: scaleY(0);
  }
</style>

效果：