vue自定义下拉框组件

创建下拉框组件 Select.vue

<template>
  <div class="selects">
    <div
      :class="{selects0show: !isshow,selects0hade: isshow}"
      class="selects0"
      @click="isshow=!isshow"
    >
      <p ref="mybox">请选择</p>
        <img src="@/assets/home/z_x_jt.png" alt srcset />
    </div>
    <div ref="myselect" :class="{show: !isshow,hade: isshow}" class="sel">
      <div
        @click="cutValue(1)"
        ref="mybox1"
        :class="{borders:num ==1}"
        :style="{display: num >=1?'block':'none'}"
      >{{selects1}}</div>
      <div
        @click="cutValue(2)"
        ref="mybox2"
        :class="{borders:num ==2}"
        :style="{display: num >=2?'block':'none'}"
      >{{selects2}}</div>
      <div
        @click="cutValue(3)"
        ref="mybox3"
        :class="{borders:num ==3}"
        :style="{display: num >=3?'block':'none'}"
      >{{selects3}}</div>
      <div
        @click="cutValue(4)"
        ref="mybox4"
        :class="{borders:num ==4}"
        :style="{display: num >=4?'block':'none'}"
      >{{selects4}}</div>
      <div
        @click="cutValue(5)"
        ref="mybox5"
        :class="{borders:num ==5}"
        :style="{display: num >=5?'block':'none'}"
      >{{selects5}}</div>
    </div>
  </div>
</template>


<script>
export default {
  props: {
    num: String, //显示多少个下拉框
    selects1: String, //列表里的文字
    selects2: String,
    selects3: String,
    selects4: String,
    selects5: String
  },
  data() {
    return {
      isshow: true //控制下拉框显示及隐藏
    };
  },
  methods: {
    //点击换文字的方法
    cutValue(val) {
      let _this = this
      cutfun(val)
      _this.isshow = true;
      function cutfun(val){
        if (val == 1) {
          _this.$refs.mybox.innerText = _this.$refs.mybox1.innerText;
        } else if(val == 2){
          _this.$refs.mybox.innerText = _this.$refs.mybox2.innerText;
        } else if(val == 3){
          _this.$refs.mybox.innerText = _this.$refs.mybox3.innerText;
        }else if(val == 4){
           _this.$refs.mybox.innerText = _this.$refs.mybox4.innerText;
        }else if(val == 5){
           _this.$refs.mybox.innerText = _this.$refs.mybox5.innerText;
        }
      _this.$emit("va", val, _this.$refs.mybox.innerText);
      }
    }
  }
};
</script>

<style lang="less" scoped>
//显示下拉框
.show {
  display: block;
}
//隐藏下拉框
.hade {
  display: none;
}
//点击时改变选择框的边框颜色
.selects0show {
  border: 1px solid #01be6e;
}
//恢复边框颜色
.selects0hade {
  border: 1px solid #e4e4e4;
}
//最后一个下拉框底部加边框
.borders {
  border-bottom: 1px solid #01be6e !important;
}

//倒三角
.traing{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #666666;
}
.selects {
  width: 100%;
  height: 100%;
  .selects0 {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    p {
      line-height: 100%;
      display: inline;
      color: #666666;
      font-size: 15px;
      padding-left: 10px;
    }
    img {
      margin-right: 10px;
      transform: translateY(-2px);
    }
  }
  .sel {
    width: 100%;
    height: 100%;
    div {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 35px;
      border: 1px solid #01be6e;
      border-top: none;
      padding-left: 10px;
      border-bottom: none;
      background: white;
    }
    div:hover {
      background: #01be6e;
      color: white;
    }
    .selects0:hover {
      background: white;
    }
  }
}
</style>

使用下拉框组件

//注：下拉框组件的宽高依赖于组件的父盒子 
 <template>
 <div class="t_selects">
         <!-- 使用下拉框组件 -->
         <Myselects
         //@va是子组件传给父组件的事件 有两个参数（当前点击下拉框的索引，当前点击下拉框里面的文字）
         @va="sunValue"   
         //num是指定下拉框的个数 最多为5个
         num="3"
         //selects1-selects5 是自定义下拉框1-5里面的内容
         :selects1="selects1"
         :selects2="selects2"
          :selects3="selects3"
         ></Myselects>
 </div>
 </template>
 
  <script>
  import Selects from "@/components/Selects";
  export default {
 data() {
    return {
      selects1: "列表1",
      selects2: "列表2",
      selects3: "列表3",
      }
      }
  components: {
    Myselects: Selects
  },
  methods: {
    //拿到子组件下拉框里面的索引及内容  参数(当前点击下拉框的索引，当前点击下拉框里面的文字)
    sunValue(index,val) {
      console.log(index,val);
    }
    }
    }
 </script>
 //定义父盒子的宽高
 <style>
 .t_selects {
    width: 300;
    height: 35px;
    z-index: 1000;
   }
 </style>

效果图：

 

 

 

 

  图片素材

 

不喜勿喷