vue中input输入框，限制只能输入小数点后俩位

考虑到了代码的复用。在input中，设置输入整数很简单

<el-input onKeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))" v-model="editForm.tBiddingSku" auto-complete="off" ></el-input>

这样处理就行。但是如果限制为只能输入小数点后俩位。还要去解决输入人的破坏性输入。比如输入 .22 、 1. 等等。怎么在输入框中直接就处理掉。

第一步，新建validation.js

import Vue from 'vue'
/**权限指令**/
const decimal = Vue.directive('decimal', {
	
	 inserted: function (el, binding, vnode) {
		
		const input = el.getElementsByTagName('input')[0];
		
		//添加@input事件
	  input.onkeyup = function (e) {
	  	
	  	var regStrs = [
	        ['^0(\\d+)$', '$1'], //禁止录入整数部分两位以上，但首位为0
	        ['[^\\d\\.]+$', ''], //禁止录入任何非数字和点
	        ['\\.(\\d?)\\.+', '.$1'], //禁止录入两个以上的点
	        ['^(\\d+\\.\\d{2}).+', '$1'] //禁止录入小数点后两位以上
	    ];
	    for (var i = 0; i < regStrs.length; i++) {
	        var reg = new RegExp(regStrs[i][0]);
	        input.value = input.value.replace(reg, regStrs[i][1]);
	    }
	    
	    trigger(input, 'input')
	  	
	  }
	  
	  //添加@blur事件，光标切换之后对数字进行补位
        input.onblur = function (e) {
        	
        	var v = input.value;
              
	        if (v === '') {
	            v = '0.00';
	        } else if (v === '0') {
	            v = '0.00';
	        } else if (v === '0.') {
	            v = '0.00';
	        } else if (v === '.00') {
	            v = '0.00';
	        } else if (/^0+\d+\.?\d*.*$/.test(v)) {
	            v = v.replace(/^0+(\d+\.?\d*).*$/, '$1');
	            v = inp.getRightPriceFormat(v).val;
	        } else if (/^0\.\d$/.test(v)) {
	            v = v + '0';
	        } else if (!/^\d+\.\d{2}$/.test(v)) {
	        	
	            if (/^\d+\.\d{2}.+/.test(v)) {
	                v = v.replace(/^(\d+\.\d{2}).*$/, '$1');
	                
	            } else if (/^\d+$/.test(v)) {
	                v = v + '.00';
	            } else if (/^\d+\.$/.test(v)) {
	                v = v + '00';
	            } else if (/^\d+\.\d$/.test(v)) {
	                v = v + '0';
	            } else if (/^[^\d]+\d+\.?\d*$/.test(v)) {
	                v = v.replace(/^[^\d]+(\d+\.?\d*)$/, '$1');
	            } else if (/\d+/.test(v)) {
	                v = v.replace(/^[^\d]*(\d+\.?\d*).*$/, '$1');
	                ty = false;
	            } else if (/^0+\d+\.?\d*$/.test(v)) {
	                v = v.replace(/^0+(\d+\.?\d*)$/, '$1');
	                ty = false;
	            } else {
	                v = '0.00';
	            }
	        }
	        input.value = v;
        	
        }
	  
		trigger(input, 'input')
//		console.log(input,trigger(input, 'input'));
		
	 }
});


const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

export {decimal}  

这个里面困扰我最长的是。我获取到了input标签，就是el. 然后怎么去添加对应事件。找了好久，原来很简单

//添加@input事件
 input.onblur = function (e) {
 }

//添加@blur事件，光标切换之后对数字进行补位
  input.onblur = function (e) {
  }

然后在main.js中加入

import decimal from '@/api/validation.js';

最后就是使用了

<el-input v-model="editForm.tTheorySku" v-decimal auto-complete="off" ></el-input>

也就是加入 v-decimal 就可以限制输入框中只能输入俩位数的数字咯。在这里注意了，如果你输入的是 .22 我会默认为 22 ，会认为你前面的. 是不小心输入的。

以上只是个人的思路，应该还有更好的办法。当然咯，该输入框还可以进行扩展，你想怎么定义都行。