selectドロップダウンボックスコンポーネント

import selec from './Select'

export default {
  components: {
    selec
  },
  data () {
    return {
      // option    
      sele: ["111","222","333","444"],
      //          
      isSeleDiv: false
    }
  },
  methods: {
    //          
    isBool () {
      this.isSeleDiv = !this.isSeleDiv
    }
  }
}

<template>
    <div class="select">
        <!-- input  -->
        <div class="selectDiv" ref="selectDiv" @click="onSelectDiv" >
          <div class="selectDiv_inp">
            <input type="text" v-model="inputValue" disabled="true" >
          </div>
          <!--        -->
          <div class="selectDiv_icon">
            <svg :class="[rotate?'go':'aa']" t="1590832124447" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2587" width="200" height="200"><path d="M175.9792 326.9552c-9.3728-9.3728-24.5696-9.3728-33.9424 0-9.3712 9.3728-9.3712 24.568 0 33.9408l324.2432 324.2432c25.248 25.248 66.184 25.248 91.4304 0L881.9536 360.896c9.3728-9.3728 9.3728-24.568 0-33.9408-9.3728-9.3728-24.568-9.3728-33.9408 0L523.7696 651.1968c-6.5024 6.504-17.0448 6.504-23.5488 0L175.9792 326.9552z" fill="#979797" p-id="2588"></path></svg>
          </div>
        </div>
        <!--     ul -->
        <ul class="select_ul" v-show="isSeleDiv">
          <li class="select_ul_li" @click="onSelect(item)"
             v-for="(item,index) in sele" :key="index">
             {
     {
     item}}
          </li>
        </ul>
    </div>
</template>

<script>
export default {
     
  props: {
     
    //         
    sele: Array,
    //           
    isSeleDiv: Boolean
  },
  data () {
     
    return {
     
      // ul li     
      // input     
      inputValue: '   ',
      //        false
      rotate: false
    }
  },
  methods: {
     
    onSelectDiv () {
     
      //       
      this.$emit('isBool',this.isSeleDiv)
      
      //       180 
      this.rotate=!this.rotate;
    },
    onSelect (item) {
     
      //        input 
      this.inputValue = item
      //       
      this.$emit('isBool',this.isSeleDiv)
      //       180 
      this.rotate=!this.rotate;
    }
  }
}
</script>

<style scoped>
.selectDiv{
     
  width: 2.5rem;height: 0.3rem;
  border: 1px solid gainsboro;
  display: flex;
}
.selectDiv_inp{
     
  width: 90%;height: 100%;
}
.selectDiv_inp>input{
     
  width: 100%;height: 100%;
  border: none;
  outline: none;
  text-indent: 0.1rem;
  color: gray;
  background-color: white;
}
/*      */
.selectDiv_icon{
     
  width: 10%;height: 100%;
}
.icon{
     
  width: 100%;height: 100%;
}

/* ========  180   ======== */
.aa{
     
  transition: all 0.2s;
}
.go{
     
  transform:rotate(-180deg);
  transition: all 0.2s;
}
/* ============================ */


.select_ul{
     
  width: 2.5rem;
  border: 1px solid gainsboro;
}
.select_ul_li{
     
  width: 2.5rem;height: 0.3rem;
  display: flex;
  align-items: center;
  text-indent: 0.1rem;
}
</style>