【Vue 2.X】基于input[type='number']封装parseFloat、parseInt-自定义指令系列（一）
一、parseFloat
效果：限制负值输入，且输入值不为空时自动保留两位小数，等同于js的parseFloat(value).toFixed(2)
使用：与v-model配合使用，v-parseFloat=“v-model绑定值”
1 Vue.directive('parseFloat', { 2 bind: function(el, binding, vNode){ 3 el.oInput = el.getElementsByTagName('input')[0] 4 el.maxNum = binding.arg 5 el.handlerKeyUp = function(){ 6 if(el.oInput.value){ 7 let tempArr = String(el.oInput.value).split('.') 8 if(tempArr[1] && tempArr.length <= 2 && !isPostNum(el.oInput.value)){ 9 el.oInput.value = Number(el.oInput.value).toFixed(2) 10 vNode.context[binding.expression] = Number(el.oInput.value).toFixed(2) 11 return 12 } 13 } 14 if(!el.oInput.value){ 15 el.oInput.value = '' 16 vNode.context[binding.expression] = '' 17 return 18 } 19 } 20 el.handlerBlur = function(){ 21 if(el.oInput.value){ 22 el.oInput.value = Number(el.oInput.value).toFixed(2) 23 vNode.context[binding.expression] = Number(el.oInput.value).toFixed(2) 24 return 25 } 26 } 27 el.oInput.addEventListener('keyup',el.handlerKeyUp) 28 el.oInput.addEventListener('blur',el.handlerBlur) 29 }, 30 unbind:function(el){ 31 el.oInput = el.getElementsByTagName('input')[0] 32 el.oInput.removeEventListener('keyup', el.handlerKeyUp) 33 el.oInput.removeEventListener('blur', el.handlerBlur) 34 } 35 });
1 const regFloat = /^(([0]|[1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/ //两位小数 2 // 判断是否是正数(保留两位小数) minNum最小值 maxNum最大值 3 function isPostNum(value, minNum, maxNum){ 4 const minVal = minNum || '' 5 const maxVal = maxNum || '' 6 if(!regFloat.test(value)){ 7 return false 8 } 9 if(minVal && value < minVal){ 10 return false 11 } 12 if(maxNum && value > maxVal){ 13 return false 14 } 15 return true 16 }
二、parseInt
效果：限制负值输入，且输入值不为空时自动保留整数，等同于js的parseInt(value)
使用：与v-model配合使用，v-parseFloat=“v-model绑定值”
1 Vue.directive('int', { 2 bind: function(el, binding, vNode){ 3 el.oInput = el.getElementsByTagName('input')[0] 4 el.maxNum = binding.arg 5 el.handlerKeyUp = function(){ 6 if(!isNum(el.oInput.value)){ 7 el.oInput.value = '' 8 vNode.context[binding.expression] = '' 9 return 10 } 11 if(el.oInput.value){ 12 el.oInput.value = parseInt(el.oInput.value) 13 vNode.context[binding.expression] = parseInt(el.oInput.value) 14 return 15 } 16 if(!el.oInput.value){ 17 el.oInput.value = '' 18 vNode.context[binding.expression] = '' 19 return 20 } 21 } 22 el.handlerBlur = function(){ 23 if(el.oInput.value){ 24 el.oInput.value = parseInt(el.oInput.value) 25 vNode.context[binding.expression] =parseInt(el.oInput.value) 26 return 27 } 28 } 29 el.oInput.addEventListener('keyup',el.handlerKeyUp) 30 el.oInput.addEventListener('blur',el.handlerBlur) 31 }, 32 unbind:function(el){ 33 el.oInput = el.getElementsByTagName('input')[0] 34 el.oInput.removeEventListener('keyup', el.handlerKeyUp) 35 el.oInput.removeEventListener('blur', el.handlerBlur) 36 } 37 });
