限制input 只能输入正整数小数点一位 两位(指令方法)
1.在directive文件下的directive.js中内容如下
// 判断小数点正整数 v-inputLimit='0' 0位 v-inputLimit='1' 1位 v-inputLimit='2' 2位 const inputLimit = { bind(el, binding) { var wins_0 = /[^\d]/g //整数判断 var wins_1 = /[^\d^\.]/g //小数判断 var flag = true; var points = 0; var lengths = 0 var remainder = 0 var no_int = 0 const target = el instanceof HTMLInputElement ? el : el.querySelector("input"); target.addEventListener("compositionstart", e => { flag = false; }); target.addEventListener("compositionend", e => { flag = true; }); target.addEventListener("input", e => { setTimeout(function() { if (flag) { if (binding.value == 0) { if (wins_0.test(e.target.value)) { e.target.value = e.target.value.replace(wins_0, ""); e.target.dispatchEvent(new Event("input")) //手动更新v-model值 } } if (binding.value == 1) { if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) { remainder = true } if ((e.target.value.split('.')).length - 1 > 1) { points = true } if (e.target.value.toString().split(".")[1] != undefined) { if (e.target.value.toString().split(".")[1].length > 1) { lengths = true } } if (e.target.value.toString().indexOf(".") != -1) { no_int = false } else { no_int = true } if (wins_1.test(e.target.value) || lengths || points || remainder) { if (!no_int) { e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace( '$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf( ".") + 2) } else { e.target.value = e.target.value.replace(wins_0, "") } e.target.dispatchEvent(new Event("input")) } } if (binding.value == 2) { if (wins_0.test(e.target.value.toString().replace(/\d+\.(\d*)/, '$1'))) { remainder = true } if ((e.target.value.split('.')).length - 1 > 1) { points = true } if (e.target.value.toString().split(".")[1] != undefined) { if (e.target.value.toString().split(".")[1].length > 2) { lengths = true } } if (e.target.value.toString().indexOf(".") != -1) { no_int = false } else { no_int = true } if (wins_1.test(e.target.value) || lengths || points || remainder) { if (!no_int) { e.target.value = e.target.value.replace(wins_1, "").replace('.', '$#$').replace(/\./g, '').replace( '$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').substring(0, e.target.value.indexOf( ".") + 3) } else { e.target.value = e.target.value.replace(wins_0, "") } e.target.dispatchEvent(new Event("input")) } } } }, 0) }) } } // 自定义指令 const directives = { inputLimit, } export default { install(Vue) { Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]) }) }, }
2.在mian中引用
import directive from './directive/directive' // 全局组件挂载 Vue.use(directive)
3.使用
<el-input class="t-input" :disabled='isCanView' v-inputLimit='0' v-model="formData.performanceWeight" placeholder="请输入"></el-input>
<el-input class="t-input"
:disabled='isCanView'
v-inputLimit='1'
v-model="formData.performanceWeight"
placeholder="请输入"></el-input>
<el-input class="t-input"
:disabled='isCanView'
v-inputLimit='2'
v-model="formData.performanceWeight"
placeholder="请输入"></el-input>
分类:
VUE
, Javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义