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