【Vue 2.X】基于input[type='number']封装parseFloat、parseInt-自定义指令系列（一）

一、parseFloat

效果：限制负值输入，且输入值不为空时自动保留两位小数，等同于js的parseFloat(value).toFixed(2)

使用：与v-model配合使用，v-parseFloat=“v-model绑定值”

 Vue.directive('parseFloat', {
     bind: function(el, binding, vNode){
         el.oInput = el.getElementsByTagName('input')[0]
         el.maxNum = binding.arg
         el.handlerKeyUp = function(){
             if(el.oInput.value){
                 let tempArr = String(el.oInput.value).split('.')
                 if(tempArr[1] && tempArr.length <= 2 && !isPostNum(el.oInput.value)){
                     el.oInput.value = Number(el.oInput.value).toFixed(2)
                     vNode.context[binding.expression] = Number(el.oInput.value).toFixed(2)
                     return
                 }
             }
             if(!el.oInput.value){
                 el.oInput.value = ''
                 vNode.context[binding.expression] = ''
                 return
             }
         }
         el.handlerBlur = function(){
             if(el.oInput.value){
                 el.oInput.value = Number(el.oInput.value).toFixed(2)
                 vNode.context[binding.expression] = Number(el.oInput.value).toFixed(2)
                 return
             }
         }
         el.oInput.addEventListener('keyup',el.handlerKeyUp)
         el.oInput.addEventListener('blur',el.handlerBlur)
     },
     unbind:function(el){
         el.oInput = el.getElementsByTagName('input')[0]
         el.oInput.removeEventListener('keyup', el.handlerKeyUp)
         el.oInput.removeEventListener('blur', el.handlerBlur)
     }
 });

 const regFloat = /^(([0]|[1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/ //两位小数
 // 判断是否是正数(保留两位小数) minNum最小值 maxNum最大值
 function isPostNum(value, minNum, maxNum){
     const minVal = minNum || ''
     const maxVal = maxNum || ''
     if(!regFloat.test(value)){
       return false
     }
     if(minVal && value < minVal){
       return false
     }
     if(maxNum && value > maxVal){
       return false
     }
     return true
 }

二、parseInt

效果：限制负值输入，且输入值不为空时自动保留整数，等同于js的parseInt(value)

使用：与v-model配合使用，v-parseFloat=“v-model绑定值”

 Vue.directive('int', {
     bind: function(el, binding, vNode){
         el.oInput = el.getElementsByTagName('input')[0]
         el.maxNum = binding.arg
         el.handlerKeyUp = function(){
             if(!isNum(el.oInput.value)){
                 el.oInput.value = ''
                 vNode.context[binding.expression] = ''
                 return
             }
             if(el.oInput.value){
                 el.oInput.value = parseInt(el.oInput.value)
                 vNode.context[binding.expression] = parseInt(el.oInput.value)
                 return
             }
             if(!el.oInput.value){
                 el.oInput.value = ''
                 vNode.context[binding.expression] = ''
                 return
             }
         }
         el.handlerBlur = function(){
             if(el.oInput.value){
                 el.oInput.value = parseInt(el.oInput.value)
                 vNode.context[binding.expression] =parseInt(el.oInput.value)
                 return
             }
         }
         el.oInput.addEventListener('keyup',el.handlerKeyUp)
         el.oInput.addEventListener('blur',el.handlerBlur)
     },
     unbind:function(el){
         el.oInput = el.getElementsByTagName('input')[0]
         el.oInput.removeEventListener('keyup', el.handlerKeyUp)
         el.oInput.removeEventListener('blur', el.handlerBlur)
     }
 });