vue自定义select组件

SelectBar组件

<template>
  <div class="m-select-wrap">
    <input
      :class="['u-select-input f16', color === 'blue' ? '' : 'white-color']"
      type="text"
      readonly
      @click="openSelect"
      @blur="onBlur"
      v-model="selectName" />
    <div @click="openSelect">
      <i :class="['el-icon-arrow-down', { 'rotate': rotate }]"></i>
    </div>
    <div :class="['m-options-panel f16', showOptions ? 'show': 'hidden']" :style="`height: ${selectData.length * 44}px;`">
      <p class="u-option" @mousedown="getValue(item.name, item.value, index)" v-for="(item, index) in selectData" :key="index" :style="bgstyle(item.value)">
        {{ item.name }}
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Select',
  props: {
    selectData: {
      type: Array,
      default: () => {
        return []
      }
    },
    selValue: { // 将该prop值作为selV的初始值
      default: undefined
    },
    color: {
      type: String,
      default: () => {
        return 'blue'
      }
    }
  },
  computed: {
    selectName () {
      for (const item of this.selectData) {
        if (item.value === this.selectValue) {
          return item.name
        }
      }
      return ''
    },
    bgstyle(status){
      return (icontent) => {     
          if(icontent == 1){
              return { 'background': '#DDDDDE','color':'#fff'}
          }
          else if (icontent == 2){
              return {'background':'#04C875','color':'#fff'}
          } 
          else if (icontent == 3){
              return {'background':'#186CFF','color':'#fff'}
          }
          else if (icontent == 4){
              return {'background':'#FEC073','color':'#fff'}
          }else if (icontent == 5){
              return {'background':'#E2445C','color':'#fff'}
          }    
        }
    }
  },
  data () {
    return {
      selectValue: this.selValue,
      rotate: false,
      showOptions: false
    }
  },
  methods: {
    openSelect () {
      this.showOptions = !this.showOptions
      this.rotate = !this.rotate
    },
    getValue (name, value, index) {
      this.selectValue = value
      this.$emit('getValue', name, value, index)
    },
    onBlur () {
      this.showOptions = false
      this.rotate = false
    }
  }
}
</script>
<style lang="scss" scoped>
.m-select-wrap {
  width: 200px;
  height: 40px;
  line-height: 40px;
  position: relative;
  border-radius:2px;
  border:1px solid #eeeeee;
  .u-select-input {
    width: 122px;
    height:100%;
    background: #3A79EE;
    color: #FFFFFF;
    height: 40px;
    line-height: 40px;
    padding: 0 40px 0 30px;
    cursor: pointer;
    border: none;// 取消边框线
    outline:none;// 取消激活线
    
  }
  .white-color {
    background: #FFFFFF;
    color: #353535;
    font-size:18px;
  }
  .el-icon-arrow-down { // 下三角样式
    // width: 0;
    // height: 0;
    // border-left: 5px solid transparent;
    // border-right: 5px solid transparent;
    // border-top: 10px solid #333;
    font-size:20px;
    color:#9aacc6;
    font-weight:bold;
    position: absolute;
    top: 10px;
    right: 15px;
    transition: transform 0.3s ease-in-out;
  }
  .rotate {
    position: absolute;
    top: 10px;
    right: 15px;
    transition: transform 0.3s ease-in-out;
    transform: rotate(180deg);
  }
  .m-options-panel {
    position: absolute;
    background: #FFFFFF;
    width: 200px;
    top: 46px;
    left: 0;
    color: #706F94;
    z-index:2;
    border:1px solid #dddddd;
    border-radius:4px;
    padding-bottom:6px;
    .u-option {
      margin:auto;
      width:132px;
      height:40px;
      line-height:40px;
      margin-top:4px;
      margin-bottom:4px;
      padding: 0 30px;
      cursor: pointer;
      color: #353535;
      font-size:18px;
      border-radius:2px;
    }
  }
  .show {
    display: block;
  }
  .hidden {
    display: none;
  }
}
</style>

引用Select

 <SelectBar
 :selectData="options"
 :selValue="selValue"
 color="white"
 @getValue="getValue" />
 options: [{
    value: '0',
     name: '全部任务'
 }, {
     value: '5',
     name: '延期任务'
 }, {
     value: '4',
     name: '预警任务'
 }, {
     value: '1',
     name: '未开始任务'
 }, {
     value: '3',
     name: '进行中任务'
 },{
     value: '2',
     name: '已完成任务'
 }],
 selValue:""
 created(){
  // 初始化下拉框
  this.selValue = this.options[0].value
 },
 // 选择的值
 getValue (name, value, index) {
    console.log('item:', name, value, index)
  },