vue自定义指令实现input输入过滤只输入正整数和浮点数_vue input number 过滤

功能

实现只能输入数字，或输入2位或4位小数（通过传参控制）

代码

toFixed.js

import Vue from "vue";

Vue.directive("toFixed", {
	componentUpdated(el, binding) {
		let toFixedLength = binding.value;
		if (!toFixedLength) {
			return false;
		}

		const ele: any = el.tagName === "INPUT" ? el : el.querySelector("input");
		ele.addEventListener("input", () => {
			let val = ele.value;
			if (isNaN(val)) {
				ele.value = "";
				return false;
			}
			if (typeof val === "number") {
				val = val.toString();
			}
			if (typeof val === "string") {
				switch (toFixedLength) {
					case 2:
						val = val.replace(/^(-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
						break;
					case 4:
						val = val.replace(/^(-)*(\d+)\.(\d\d\d\d).*$/, "$1$2.$3");
						break;
				}
				ele.value = val;
			}
		});
	},
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

• main.js中全局引入

// 正整数和浮点数输入自定义指令
import "@/directive/toFixed";
1
2

使用

如果要保留4位小数

 <el-input  v-toFixed="4"></el-input>
1

如果要保留2位小数

 <el-input   v-toFixed="2"></el-input>
1