lightlimx-website/components/FilterInput/index.vue

<template>
    <div class="filter-input-wrap">
      <van-field class="filter-input" readonly label-width="auto" placeholder="Filter" v-model="text"  >
        <template #label>
          <div class="filter-input-label">
            <svg-icon icon-class="filter"></svg-icon>
          </div>
        </template>
        <template #extra>
          <div class="filter-input-extra" >
            <div class="filter-input-icon-wrap" @click="handleOptionsShow">
              <svg-icon icon-class="filter-ar" :class="{active:blockShow}"></svg-icon>
            </div>
            <span  @click="handleOptionsShow">{{activeText}}</span>
            <ul class="filter-options" :style="{'display':!blockShow?'none':'block'}" >
              <li class="filter-options-item" @click="handleItemClick(item)" :class="{'active':active===item.id}" v-for="(item,index) in locations" :key="'local_'+index">{{item.name}}</li>
            </ul>
          </div>
        </template>
      </van-field>
    </div>
</template>

<script>
    export default {
        name: "FilterInput",
      props:{
        locations:{
          default:()=>[],
          type:Array
        },
        active:{
          default:'',
          type:String
        },
      },
      methods:{
        handleOptionsShow(){
          this.blockShow=!this.blockShow
        },
        handleItemClick(item){
          this.blockShow=false
          this.$emit('select',item)
        }
      },
      computed:{
          activeText(){
            if(!this.locations){
              return  'Locations'
            }
            const location= this.locations.find((item)=>{
              return item.id===this.active
            })
            return location?location.name:'Locations'
          }
      },
        data(){
            return {
              blockShow:false,
              text:''
            }
        }
    }
</script>

<style scoped lang="less">
  .filter-options{
    min-width: 100%;
    position: absolute;
    min-height: 1.6rem;
    background: #FFFFFF;
    padding-left: .24rem;
    box-shadow: 0 .03rem .06rem rgba(0, 0, 0, 0.16);
    bottom: 0;
    transform: translateY(100%);
    box-sizing: content-box;
    left: -.2rem;
    transition: all .3s ease-in;
    z-index: 1;
    &-item{
      width: 100%;
      font-family: Manrope;
      font-weight: 400;
      line-height: .4rem;
      color: #302D2C;
      box-sizing: content-box;
      padding-left: .24rem;
      min-height: .4rem;
      font-size: .16rem;
      margin-left: -.24rem;
      background-color: #fff;
      cursor: pointer;
      &.active{
        background-color: #F49F00;
        color: #Fff;
      }
    }
  }
.filter-input{
  height: .6rem;
  box-sizing: border-box;
  padding: .06rem 0 .06rem .14rem;
  overflow: initial;

  &-wrap{
    margin-top: -.3rem;
    position: relative;
    z-index: 1;
    width: 100%;
    height: .6rem;
    background: #FFFFFF;
    box-shadow: 0 .03rem .06rem rgba(0, 0, 0, 0.16);
  }
  &-extra{
    display: flex;
    align-items: center;
    position: relative;
    padding-right:  .14rem;
    box-sizing: border-box;
    min-width: 1.53rem;
    >span{
      cursor: pointer;
      user-select: unset;
    }
  }
  &-label{
    display: flex;
    align-items: center;
    justify-content: center;
    .svg-icon{
      width: .48rem;
      height: .48rem;
    }
  }
  &-icon-wrap{
    cursor: pointer;
    margin-right: .17rem;
    display: flex;
    align-items: center;
    .svg-icon{
      transition: all .3s ease-in;
      width: .3rem;
      height: .3rem;
      &.active{
        transform: rotate(180deg);
      }
    }
  }

}
  @media screen and (max-width: 768px) {
    .filter-options{
      min-height: 3.2rem;
      padding-left: 0;
      left: 50%;
      min-width: 2rem;
      transform: translateX(-50%) translateY(100%);
      box-sizing: border-box;
      &-item{
        line-height: .8rem;
        box-sizing: border-box;
        padding-left: .5rem;
        margin-left: 0;
        min-height: .8rem;
        font-size: .26rem;
      }
    }
    .filter-input{
      height: 100%;
      min-height: .8rem;
      padding: 0;
      box-sizing: border-box;
      &-extra{
        min-width: 2.46rem;
        padding-right: .32rem;
      }
      &-wrap{
        margin-top: -.4rem;
        margin-left: .15rem;
        margin-right: .15rem;
        box-sizing: border-box;
        height: .8rem;
        width: auto;
        display: block;
      }
      &-label{
        .svg-icon{
          width: .8rem;
          height: .8rem;
        }
      }
      &-icon-wrap{
        margin-right: 0;
        .svg-icon{
          width: .8rem;
          height: .8rem;
        }
      }

    }
  }
</style>
<style lang="less">
  .filter-input{
    .van-field__body{
      height: 100%;
    }
    .van-field__control{
      font-size: .18rem;
      font-family: Manrope;
      font-weight: 400;
      color: #302D2C;
      &::placeholder{
        font-size: .16rem;
        font-family: Manrope;
        font-weight: 400;
        color: #302D2C;
      }
    }
  }
  @media screen and (max-width: 768px) {
    .filter-input{
      .van-field__control{
        font-size: .26rem;
        &::placeholder{
          font-size: .26rem;
        }
      }
    }
  }
</style>