当前位置：首页 > article >正文

Vue - Element 选择器 el-select 既可以选择下拉又可以手动输入文本功能（手动输入的值只能是数字并且支持4位小数）

article 2024/10/21 21:59:36

Vue - Element 选择器 el-select 既可以选择下拉又可以手动输入文本功能（手动输入的值只能是数字并且支持4位小数）

在这里插入图片描述

备注
filterable 下拉框开启快速搜索功能
no-match-text 当输入的内容在下拉框中找不到时；下拉框提示的文字
@handFocus 触发输入框
@change 点击下拉选项
@visible-change下拉框出现/隐藏时触发
@keyup.native 输入搜索内容实时触发（在此方法中对输入格式做限制）

template部分

 <el-select
    v-model="min"
    filterable
    placeholder="最小值"
    no-match-text="可手动输入"
    style="width:90px;margin-right: 4px;"
    ref="inputSelectMin" 
    @focus="handFocus" 
    @change="handChange"
    @visible-change="handleVisibleChange"
    @keyup.native="inputData"
>
    <el-option
        v-for="item in minToleranceTypeList"
        :key="item.codeValue"
        :label="item.name"
        :value="item.codeValue" 
     />
</el-select>

逻辑部分（ el-select 实现既可以输入内容又可以快速选择）

  private isSelectChange:boolean= false;// 判断是选择下拉选项 默认未选择
  handChange (data:any) {
    this.min = data
    this.isSelectChange = true;
  }
  handleVisibleChange(val:any){
    if(!val){
      let input = this.$refs[ref]?.$children[0].$refs.input;
      input.blur();
    }
  }
  handFocus(){
    let input = this.$refs.inputSelectMin?.$children[0].$refs.input;
    input.blur= ()=> {
      if (!this.isSelectChange) {
        this.min = input.value;
      }
      this.isSelectChange = false
    }
  }
  // 输入框只能输入数字，最大可支持4位小数
  inputData(val:any){
    let strData = val.srcElement.value
    if (/^(\.)/.test(strData)) {
      // 匹配第一个字符是否为 .
      val.srcElement.value = strData.substring(
        strData.lastIndexOf(".") + 1,
        strData.length
      );
      return;
    }
    if (/[^\d.]+/.test(strData)) {
      // 匹配中间是否插入了字母,等其他字符
      val.srcElement.value = strData.replace(/[^\d.]+/, "");
      return;
    }
    if (/([0-9]\d*)(\.\d*){2,}/.test(strData)) {
      // 匹配是否有多个 . --恶意输入
      val.srcElement.value = "";
      return;
    }
    if (/^([0-9]\d{0,7}(\.\d{5,}))$/.test(strData)) {
      // 小数点后是否超过了3位-恶意输入
      val.srcElement.value = strData.substring(0, strData.lastIndexOf(".") + 5);
      return;
    }
    val.srcElement.value = strData.substring(0, strData.length);
  }