自己封装一个下拉列表

Posted 2021-12-15 panax

// 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>

 

效果：