Their own package to a drop-down list

// html:

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

Data () { 
    selectData: { 
              defaultIndex: 0, // selected by default is the first of several 
              selectStatus: to false , // to control the drop-down box displayed and hidden by the 
              selectOptions: [] // data drop-down box 
     }, 
} 

onChangeOption (index, ID, houseName) { 
            // header selection drop-down list of 
            the this .selectData.defaultIndex = index;
             the this .houseId = ID;
             the this .houseName = houseName; 
},

Created () { 
          const that = the this ;
        the this .postRequest ( '', {}, function (Data) {     // packages this request, check the package on a axios 
            that.houseId = Data [0 ]. projectId;          // initialize the default first 
            that.houseName = Data [0 ] .projectName; 
            the let ARR = []; 
            data.forEach ((Val) => { 
            arr.push ({
               'houseId' : val.projectId,
               ' houseName ' : val.projectName 
            })  
            })
            that.selectData.selectOptions = arr
          })
        },

// package assembly 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; 
  } 
  / * the arrow Xianxiang * / 
  .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;
     / * the whole ul background color turns white * / 
    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>

 

effect: