标签：Vue 拼音 val value item num && 下拉框

项目需求下拉框根据名称、编码和简拼搜索，许多现有组件不符合需要，因此自己封装了一个组件，代码如下：

父组件使用：

   <selectDefault
            :placeholder="'请选择'"
            :bindValue.sync="value"
            :optionList="list"
            :label="'name'"
            :number="'number'"
            :english="'pinyin'"
            :values="'code'">
</selectDefault>

 子组件：

<template>
  <div class="selfSelect" id="selfSelectA" @blur="isShow=false">
    <input type="text" v-model="value" @focus="inputFocus" :placeholder="placeholder" @input="valueInput" @keyup="inputKey">
    <ul v-if="isShow">
      <li tabindex="1"
          :class="{ active: num === index,selectItems:'selectItems' }"
          v-for="(item,index) in option"
          :key="index"
          @keyup="liKey"
          @click="itemClick(item)"
      >{{item[label]}}</li>
    </ul>
    <div class="iconA"  >
      <i v-if="bindValueLine" class="el-icon-circle-close" @click.prevent.stop="removeData"></i>
      <i v-if="!bindValueLine" class="el-icon-arrow-down"></i>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'

  export default {
    props:{
      placeholder:String,
      optionList:Array,
      label:String,
      values:String,
      number:String,
      english:String,
      bindValue:[String,Number],
    },
    data() {
      return {
        chart: null,
        option:[],
        value:"",
        isShow:false,
        li:[],
        num:undefined,
        bindValueLine:""
      }
    },
    watch:{
      bindValue(val){
        this.bindValueLine=val;
      },
      bindValueLine(val){
        this.$emit("update:bindValue",val);
        if(val&&!this.value){
          this.queryName(val);
        }else if(!val){
          this.value=""
        }
      },
      optionList:{
        handler(newVal){
          if(!this.value&&this.bindValue){
            this.queryName(this.bindValue);
          }
        },
        deep:true
      }
    },
    created() {
      //默认值回显
      if(this.bindValue){
        this.queryName(this.bindValue);
      }
      addEventListener('mousedown',this.mousedown);
    },
    beforeDestroy() {
      removeEventListener('mousedown',this.mousedown)
    },
    methods: {
      //默认值回显
      queryName(val){
        this.optionList.map(item=>{
          if(item[this.values]==val){
            this.value=item[this.label]
          }
        })
      },
      //输入框获取焦点下拉框出现
      inputFocus(){
        this.isShow=true;
        this.option=this.optionList.filter((item,index)=>{
          return index<30
        });
        this.$nextTick(()=>{
          this.li=document.getElementsByClassName("selectItems");
        })
      },
      //关闭按钮清除数据
      removeData(){
        this.value="";
        this.num=undefined;
        this.bindValueLine="";
      },
      //鼠标失去焦点时关闭下拉框
      mousedown(e){
        if(e.path[1]&&e.path[1].id!="selfSelectA"&&e.path[1]&&e.path[2].id!="selfSelectA"){
          this.isShow=false;
          if(!this.bindValueLine){
            this.value="";
          }
        }else if(!e.path[1]){
          this.isShow=false;
          if(!this.bindValueLine){
            this.value="";
          }
        }
      },
      //输入框绑定值发生变化时下拉框数据随之发生变化
      valueInput(val){
        let pattern = new RegExp("[\u4E00-\u9FA5]+"); //用第一个字符判断是中文字符还是英文字符或是数字,中文匹配正则表达式
        if(pattern.test(this.value.split(",")[0]) && this.value.length > 0){
          //中文
          this.option=this.optionList.filter(item=>{
            return item[this.label]&&item[this.label].indexOf(this.value)>-1
          })
        }else if(/^[0-9]+.?[0-9]*$/.test(this.value.split(",")[0]) && this.value.length > 0){
          //数字
          this.option=this.optionList.filter(item=>{
            return item[this.number] && item[this.number].toString().indexOf(this.value)>-1
          })
        }else if(this.value.length > 0){
          //英文
          this.option=this.optionList.filter(item=>{
            return item[this.english] && item[this.english].toUpperCase().indexOf(this.value.toUpperCase())>-1
          })
        }else if(!this.value){
          //为空时清除绑定的数据 重置下拉框列表数据
          this.bindValueLine="";
          this.option=this.optionList.filter((item,index)=>{
            return index<30
          })
        }
       this.$nextTick(()=>{
         this.li=document.getElementsByClassName("selectItems");
         this.num=undefined;
       })
      },
      //点击下拉框数据 选中值
      itemClick(item){
        this.value=item[this.label];
        this.bindValueLine=item[this.values];
        this.isShow=false;
      },
      //输入框聚焦时按下箭头默认选中下拉框第一条数据
      inputKey(e) {
        switch (e.keyCode) {
          case 40:
            if(!this.num){
              this.num=0;
            }
            this.li[this.num].focus();
            //下键
            break;
          case 13:
            //回车
            break;
          default:

            break
        }
      },
      //下拉框列表键盘时间 上下移动
      liKey(e){
        switch (e.keyCode) {
            case 40:
              if(this.num>this.option.length-1){
                this.num=0
              }else{
                this.num++
              }
              this.li[this.num].focus();
              //下键
              break;
            case 38:
              if(this.num==0){
                this.num=this.option.length-1
              }else{
                this.num--
              }
              this.li[this.num].focus();
              //上键
              break;
            case 13:
              //回车
              this.value=this.option[this.num][this.label];
              this.bindValueLine=this.option[this.num][this.values];
              this.isShow=false;
              break;
            default:

              break

        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .selfSelect{
    margin:0 auto;
    width:100%;
    position: relative;
    input{
      width: 100%;
      height: 30px;
    }
    .iconA{
      width:10px;
      height: 20px;
      position: absolute;
      top:6px;
      right:10px;
      color: #606266;
      text-align: right;
    }
    ul{
      list-style: none;
      margin:0;
      padding:0;
      width: 250px;
      height: 200px;
      overflow: auto;
      border:1px solid #999999;
      position: absolute;
      top:31px;
      left:0;
      z-index:1000;
      background-color: #ffffff;
      li{
        width:100%;
        font-size: 14px;
        height: 25px;
        line-height: 25px;
        cursor: pointer;
        overflow: hidden;
        /*text-overflow: ellipsis;*/
        border-bottom: 1px solid #999999;
      }
      li:hover{
        background-color: #409EFF;
        color: #ffffff;
      }

    }
    .active{
      background-color: #409EFF;
      color: #ffffff;
    }
  }

</style>

标签：Vue,拼音,val,value,item,num,&&,下拉框
来源： https://www.cnblogs.com/xibaomeng/p/16672992.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。