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

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

备注

filterable 下拉框开启快速搜索功能

no-match-text 当输入的内容在下拉框中找不到时;下拉框提示的文字

@handFocus 触发输入框

@change 点击下拉选项

@visible-change下拉框出现/隐藏时触发

@keyup.native 输入搜索内容实时触发(在此方法中对输入格式做限制)

template部分

bash 复制代码
 <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 实现 既可以输入内容又可以快速选择)

bash 复制代码
  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);
  }
相关推荐
ssf19874 分钟前
前后端分离项目前端页面开发远程调试代理解决跨域问题方法
前端
@PHARAOH4 分钟前
WHAT - 前端性能指标(加载性能指标)
前端
尘世中一位迷途小书童9 分钟前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
非凡ghost14 分钟前
火狐浏览器(Firefox)tete009 Firefox 多语便携版
前端·firefox
文心快码BaiduComate15 分钟前
文心快码Comate3.5S更新,用多智能体协同做个健康管理应用
前端·人工智能·后端
袁煦丞19 分钟前
极空间变身全能私有云+1Panel傻瓜式部署:cpolar内网穿透实验室第618个成功挑战
前端·程序员·远程工作
袁煦丞21 分钟前
10.15-1 Reader电子书管理神器搭配极空间私有云:cpolar内网穿透实验室第488个成功挑战
前端·程序员·远程工作
ZHOUYUANN42 分钟前
我用JavaScript复刻了某宝的小游戏动物大迁徙消消乐
前端·javascript·游戏开发
Asort43 分钟前
JavaScript设计模式(十三)——责任链模式:构建灵活高效的请求处理链
前端·javascript·设计模式
_Mya_1 小时前
后端接口又改了?让 Apifox MCP 帮你自动同步类型定义
前端·人工智能·mcp