您的位置:首页 > 房产 > 家装 > 今日最新新闻热点事件_营销策划公司的基本_广告投放_免费推广方法

今日最新新闻热点事件_营销策划公司的基本_广告投放_免费推广方法

2025/1/3 3:50:08 来源:https://blog.csdn.net/hangnan315/article/details/143116703  浏览:    关键词:今日最新新闻热点事件_营销策划公司的基本_广告投放_免费推广方法
今日最新新闻热点事件_营销策划公司的基本_广告投放_免费推广方法

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

在这里插入图片描述

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

template部分

 <el-selectv-model="min"filterableplaceholder="最小值"no-match-text="可手动输入"style="width:90px;margin-right: 4px;"ref="inputSelectMin" @focus="handFocus" @change="handChange"@visible-change="handleVisibleChange"@keyup.native="inputData"
><el-optionv-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 = datathis.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.valueif (/^(\.)/.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);}

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com