自己封装一个下拉列表

野性酷女 2021-11-23 11:46 320阅读 0赞

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

效果：

![1329237-20190601182631327-1551449295.png][]

转载于:https://www.cnblogs.com/panax/p/10960527.html

[1329237-20190601182631327-1551449295.png]: /images/20211122/b5a8516e66e84002a1daaeb09577ca49.png