vue 限制el-input 只输入小数,动态设置小数位
使用 <el-input v-model="form.jkzzbX" type="text"v-input-float="{ limit: 3, min: 0,max:10000 }" /> /** * @example * v-input-float="{ limit: 1, min: 0, max: 100 }" 只允许输入一位小数 type="text" 生效 * @param limit 小数位数 * @param min 最小值 * @param max 最大值 * * */ export default { bind: (el, bind) => { const input = el.nodeName.toLowerCase() === 'input' ? el : el.getElementsByTagName('input')[0] // 改变值过后,需要主动触发input时间,组件绑定的值才会改变 let triggerBySelf = false if (input) { input.addEventListener('input', () => { if (triggerBySelf) { triggerBySelf = false return } // 将千分为值转换成正常的数值,如果input type为number 不需要千分位,可把第一个repalce正则删除 let val = input.value.replace(/,/gi, '').replace(/[^0-9.]/gi, '') // 验证数字 if (val === '') { input.value = '' return } const valArr = val.split('.') if (bind.expression) { try { const option = bind.value if (typeof option === 'object') { const { limit, min, max } = option if (limit !== undefined) { if (valArr.length > 1) { let pointLength = valArr[1].length pointLength = limit > pointLength ? pointLength : limit if (limit > 0) { val = +valArr[0] + (valArr.length > 1 ? `.${valArr[1].substr(0, pointLength)}` : '') } else { val = +valArr[0] + '' } } else { val = +val + '' } } if (typeof min === 'number' && +val < +min) { val = min + '' } // // 数值大于最大值,不可再输入 // if (typeof max === "number" && +val > +max) { // //以下控制显示的最大数为当前输入的可取最大值 // let nVal = val.split(".")[0]; // const pointVal = val.split(".")[1] ? val.split(".")[1] : ""; // const maxStringLength = String(max).split(".")[0].length; // nVal = nVal.slice(0, maxStringLength); // val = nVal + "." + pointVal; // //以下是当值大于最大值 直接赋值为最大值 // // val = max + ""; // } if (typeof min === 'number' && +val < +min) { val = min + '' } if (typeof max === 'number' && +val > +max) { val = max + '' } //数值转换为千分为,如果不需要千分位展示 可以直接删除 //val = String(val).replace(/\B(?=(\d{3})+(?!\d))/g, ","); // 改变值过后,需要主动触发input时间,组件绑定的值才会改变 const ev = new Event('input', { bubbles: true }) input.value = val triggerBySelf = true input.dispatchEvent(ev) } } catch (err) { input.value = val console.error(err) } } }) } } } 导入 import InputFloat from './utils/inputfloat' Vue.directive('input-float', InputFloat)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· AI与.NET技术实操系列(二):开始使用ML.NET
· 单线程的Redis速度为什么快?