// 限制输入框数字只能输入正整数的指令 v-int
export default (Vue) => {
// 通过Vue的指令方法,定义指令名称
Vue.directive("Int", {
// bind绑定 获取当前目标的input(就是在哪个文本框上使用指令)
bind: function (el) {
const input = el.getElementsByTagName("input")[0];
if (input) {
// 调用input方法,加入正则校验的逻辑
input.onkeyup = function (e) {
if (input.value.length === 1) {
input.value = input.value.replace(/[^0-9]/g, "");
} else {
input.value = input.value.replace(/[^\d]/g, "");
}
// 调用自定义事件
trigger(input, "input");
};
input.onblur = function (e) {
if (input.value.length === 1) {
input.value = input.value.replace(/[^0-9]/g, "");
} else {
input.value = input.value.replace(/[^\d]/g, "");
}
trigger(input, "input");
};
}
},
});
// 创建自定义事件
const trigger = (el, type) => {
const e = document.createEvent("HTMLEvents");
// 初始化默认值
e.initEvent(type, true, true);
// 触发自定义事件
el.dispatchEvent(e);
};
};
vue限制输入框数字只能输入正整数的指令(direct) v-int
最新推荐文章于 2024-01-18 11:06:28 发布