这篇文章主要介绍“vue怎么使用directive限制表单输入整数、小数”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“vue怎么使用directive限制表单输入整数、小数”文章能帮助大家解决问题。
限制小数时可以输入整数
1.第一种方法：
const limitPositive = Vue.directive('limitPositive', { update(el, {value = 0}, vnode) { // 当被绑定的元素插入到 DOM 中时 let iscancel = false; let num = value const inputEvent = e => { if (iscancel) { return false; } let res = '/^\\\d*(\\\.?\\\d{0,'+num+'})/g' if (num) { e.target.value = (e.target.value.match(eval('(' + res + ')'))[0]) || null }else { e.target.value = (e.target.value.match(/^\d*/g)[0]) || null } let v = e.target.value;//为绑定的值 vnode.data.model.callback(v);//改变虚拟节点上v-model的值 }; el.oninput = inputEvent; //解决输入中文的问题 el.addEventListener("compositionstart", e => { iscancel = true; }); el.addEventListener("compositionend", e => { iscancel = false; inputEvent(e); }); }})export { limitPositive }使用方法
import limitPositive from '@/utils/directives.js'v-limitPositive="1" //一位小数，数字可以改变v-limitPositive 整数2.第二种方法：
先建立一个num.js文件
const setVal = (val, el, vNode) => { if (vNode.componentInstance) { // 如果是自定义组件就触发自定义组件的input事件 vNode.componentInstance.$emit('input', val) } else { // 如果是原生组件就触发原生组件的input事件 el.value = val el.dispatchEvent(new Event('input')) }}const optionCheck = (binding) => { // 范围值是否为数值 if ((binding.value.max && typeof binding.value.max !== 'number') || (binding.value.min && typeof binding.value.min !== 'number')) { throw new Error('范围参数必须是数字') } // 最大最小值存在的时候判断最大值与最小值是否相等 if (binding.value.max === binding.value.min && typeof binding.value.max !== 'undefined' && typeof binding.value.min !== 'undefined') { throw new Error('最大值和最小值不能相等') }}const isInvalidVal = (bindValue) => { return bindValue === null || isNaN(Number(bindValue)) || bindValue.toString().indexOf('.') === bindValue.length - 1 || bindValue.toString().indexOf('e') !== -1}const dealRange = (inputValue, binding) => { const bindMax = typeof binding.value.max === 'undefined' ? Infinity : binding.value.max const bindMin = typeof binding.value.min === 'undefined' ? -Infinity : binding.value.min let result = inputValue if (inputValue < bindMin) { result = bindMin } if (inputValue > bindMax) { result = bindMax } return result}const preventInput = (event) => { if (event.preventDefault) { event.preventDefault() } else { event.returnValue = false }}export default { bind(el, binding, vNode) { optionCheck(binding) // 处理无效值 const bindValue = vNode.data.model.value if (isInvalidVal(bindValue)) { setVal(null, el, vNode) return } // 处理数值范围 const inputVal = dealRange(bindValue, binding) setVal(inputVal, el, vNode) }, inserted(el, binding, vNode) { let content // 按键按下=>只允许按照一定规则输入 数字/小数点/减号 el.addEventListener('keypress', e => { const inputKey = String.fromCharCode(typeof e.charCode === 'number' ? e.charCode : e.keyCode) const inputReg = /\d|\.|-/ content = e.target.value // todo:已有值的时候，选中输入框的所有值输入减号‘-'，无法覆盖输入 if (!inputReg.test(inputKey)) { preventInput(e) } else if (((content === '' || content === '-') && inputKey === '.')) { preventInput(e) } else if ((content.indexOf('.') !== -1 && inputKey === '.')) { preventInput(e) } else if ((content !== '' && inputKey === '-')) { preventInput(e) } else if ((content.indexOf('-') !== -1 && inputKey === '-')) { preventInput(e) } }) // 按键弹起=>并限制最大最小 el.addEventListener('keyup', e => { if (e.keyCode === 8) { return } // 处理无效值 const bindValue = e.target.value if (bindValue === null) { setVal(null, el, vNode) return } // 处理数值范围 const inputVal = dealRange(bindValue, binding) setVal(inputVal, el, vNode) }) // 失去焦点=>保留指定位小数 el.addEventListener('focusout', e => { // 此处会在 el-input 的 @change 后执行 // 处理无效值 const bindValue = e.target.value if (isInvalidVal(bindValue)) { setVal(null, el, vNode) return } content = parseFloat(e.target.value) const contentStr = String(content) if (contentStr.indexOf('.') >= 0 && contentStr.split('.')[1].length > binding.value.precision) { let arg_precision = 0// 默认保留至整数 if (binding.value.precision) { arg_precision = parseFloat(binding.value.precision) } content = content.toFixed(arg_precision) } setVal(content, el, vNode) }) }}在index.js文件引入
import onlyNumber from './num'const install = Vue => { Vue.directive('onlyNumber', onlyNumber)}if (window.Vue) { window['onlyNumber'] = onlyNumber Vue.use(install); // eslint-disable-line}onlyNumber.install = installexport default onlyNumber// 使用 例子：v-only-number="{max:100,min:0,precision:2}"使用例子：
// 在main.js全局注入
import onlyNumber from ‘@/directive/num’
Vue.use(onlyNumber)
v-only-number=“{max:100,min:0,precision:2}”
max：最大值
min:最小值
precision：保留小数
<el-input v-model="value" v-only-number="{max:1000,min:0}" placeholder="请输入"/>关于“vue怎么使用directive限制表单输入整数、小数”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
