vue自定義可搜索、多次複用的select選擇框，可以修改圖標和顏色

1、效果圖

 

這是我將該組件作爲子組件應用到父組件中使用的效果。同時子組件可以多次使用，子組件返回相應的數據

   主要是通過控制 選項item 的 顯示與隱藏 來實現搜索結果的。數據傳遞通過vue的父傳子和子傳父

父組件的代碼

HTML

<div>
 <span class="text">成員名稱</span>
 <MySelect v-bind:dataOption="nameList" v-on:checkOptionValue="val=>{this.obj.memberName=val}"/>
<!--
<MySelect v-bind:dataOption="nameList" v-on:checkOptionValue="val=>select(val,param)"/>
-->
</div>

js

import MySelect from '../../components/SelectBtn'
    export default {
        name: "memberManage",
      components:{
        MySelect,
      },
      data(){
        return{
            nameList:[
              {label: '1',option: '我的福氣'},
              {label: '3',option: '喫喝玩樂'},
              {label: '2',option: '喫美食'},
              {label: '6',option: '我的西瓜'},
            ],
            obj:{
              memberName:''
            }
          }
      },
methods:{
   select(val,param){
    console.log(param,"區別各個組件的參數");
   },
}
}

子組件的代碼

     select組件的代碼

<template>
  <div class="_select _my_select _select-width">
    <div class="_selectInput" @click="showOptionList()">
      <input class="_select-input" v-model="optionValue" @keyup="getMatchDataList()"  />
      <span class="_triangle" :class="{'_triangle-reverse':selectIndex==1}"></span>
    </div>
    <div class="_optionList" v-show="selectIndex==1">
      <ul class="_normal-font" id="data-ul" v-show="dataLength>0">
        <li class="_data-point"  @click="getOption(liIndex,liItem)" v-for="(liItem,liIndex) in dataOption" :_data-value="liItem.option">{{liItem.option}}</li>
      </ul>
      <ul class="_normal-font none-data-ul" v-show="dataLength==0">
        <li style=" cursor: text;color: #CED3D8;">沒有數據</li>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        name: "SelectBtn",
      props:[
        "dataOption",
        "width",//未用到
      ],
      data(){
          return{
            selectIndex:0,
            sWidth:150,//未用到
            optionValue:'',
            dataLength:0,
          }
      },
      mounted(){
        this.dataLength=this.dataOption.length;
        this.loseClick();
      },
      methods:{
          loseClick(){
            let _this=this;
            this.$jquery(document).bind("click",function(e){
                var target = _this.$jquery(e.target);
                if(target.closest("._my_select").length == 0){
                  _this.selectIndex=0;//關閉選項框
                }
            });
          },
        showOptionList(){
          if(this.selectIndex==0){
            this.selectIndex=1;
          }else {
            this.selectIndex=0;
          }
        },
        getOption(liIndex,liItem){
          this.optionValue=liItem.option;
          this.selectIndex=0;
          this.$emit('checkOptionValue', liItem.label);//返回給父組件
        },

        getMatchDataList(){
          console.log("改變1")
          this.selectIndex=1;
          var dataPoint=document.querySelectorAll('._data-point');
          if(this.optionValue==''){
            dataPoint.forEach((element,index)=>{
              if (element.classList.contains('_li-none')) {
                element.classList = ' _data-point';
              }
              console.log("還原");
            });
          }else {
            dataPoint.forEach((element,index)=>{
              if(element.getAttribute('_data-value').indexOf(this.optionValue)==-1){
                console.log("隱藏");
                if (element.classList.contains('_li-none')) {

                }else {
                  element.classList += ' _li-none';
                }
              }else{
                console.log("顯示");
                if (element.classList.contains('_li-none')) {
                  element.classList = ' _data-point';
                }
              }
            });
          }

        }
      }
    }
</script>

<style scoped>
  /*自定義選擇器*/
  ._select-width{
    width: 180px;
    height: 32px;
  }
  ._select{
    display: inline-block;
    background-color: #FFFFFF;
    border: 1px solid rgba(206,211,216,1);
    border-radius: 5px;
    position: relative;
  }
  ._selectInput input._select-input{
    width: 80%;
    border: none;
    outline: none;
    margin-left: 0.5rem;
  }
  ._triangle{
    width: 0px;                           /*設置寬高爲0，所以div的內容爲空，從才能形成三角形尖角*/
    height: 0px;
    border-top: 8px solid #015595;
    border-left: 6px solid transparent;    /*transparent 表示透明*/
    border-right: 6px solid transparent;
    position: absolute;
    top: 10px;
    right: 5px;
  }
  ._triangle-reverse{
    transform: rotate(180deg);
    transition: all 0.5s ease-in-out;
  }
  ._optionList{
  }
  ._optionList ul._normal-font{
    position: absolute;
    width: fit-content;
    min-width: 180px;
    margin: 10px 0 0 0;
    padding: 0;
    box-shadow: 0 0 2px #cccccc;
    background-color: #FFFFFF;
    z-index: 99;
  }
  ._optionList ul._normal-font li{
    display: block;
    min-width: calc(100% - 2rem);
    width: fit-content;
    margin: 0 1rem;
    padding: 0.2rem 1rem 0.2rem 1rem;
    border-radius: 2px;
    list-style: none;
    cursor: pointer;
    color: #CED3D8;
    white-space:nowrap;
    /*text-align: center;*/
  }
  ._li-none{
    display: none !important;
  }

  ul._normal-font>li._data-point:hover{
    background-color: #D4EDFF;
    color: #015595;
  }
</style>