【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)
    }
});