1、创建ts文件
import type { Directive } from "vue";
/**
自定义输入限制指令,提供多种输入模式:
* 1、默认模式:只能输入0和正整数,使用:<el-input v-int />
* 2、小数模式:只能输入0和小数,使用:<el-input v-int="'decimal'" />
* 3、正整数模式:只能输入正整数,使用:<el-input v-intr="'positiveInteger'" />
* 4、大于0小数模式:只能输入大于0的小数,使用:<el-input v-int="'positiveDecimal'" />
使用方法:在 v-int 后面传递对应的模式参数。
*/
const int: Directive = {
mounted(el, binding) {
const { value } = binding;
el.addEventListener("input", event => {
event.preventDefault(); // 阻止默认输入行为
const inputValue = event.target.value;
switch (value) {
case "decimal":
case "positiveDecimal":
event.target.value = inputValue.replace(/[^0-9.]|(\..*)\./g, "$1");
break;
default:
event.target.value = inputValue.replace(/[^\d]/g, "");
break;
}
if (
["positiveInteger", "positiveDecimal"].includes(value) &&
Number(inputValue) === 0
) {
event.target.value = "";
}
});
}
};
export default int;
2、引入
import int from "@/directives/int/index";
const vInt = int;
3、使用
<el-input
v-model="data"
v-int
/>