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);
  }
相关推荐
Asthenia041217 分钟前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端
csj5023 分钟前
前端基础之《React(1)—webpack简介》
前端·react
会写代码的饭桶24 分钟前
Jenkins 实现 Vue 项目自动化构建与远程服务器部署
vue.js·自动化·jenkins
被巨款砸中26 分钟前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略1 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
董世昌411 小时前
js怎样改变元素的内容、属性、样式?
开发语言·javascript·ecmascript
mosen8681 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
鸠摩智首席音效师2 小时前
如何清除 Yarn 缓存 ?
javascript
写不来代码的草莓熊2 小时前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
weixin_ab2 小时前
【HTML分离术】
前端·html