vue2项目封装了指令,输入框只能输入正浮点数,现在需要在此代码基础上修改下,支持输入正浮点数和负浮点数。
源码如下:
export default {
bind(el, binding, vnode) {
const input =
el.querySelector(".el-input__inner") ||
el.querySelector(".el-textarea__inner") ||
el;
input.addEventListener("compositionstart", () => {
vnode.locking = true; // 解决中文输入双向绑定失效
});
input.addEventListener("compositionend", () => {
vnode.locking = false; // 解决中文输入双向绑定失效
input.dispatchEvent(new Event("input"));
});
// 输入监听处理
input.onkeyup = () => {
if (vnode.locking) {
return;
}
// v-input.float
if (binding.modifiers.float) {
// 只能输入浮点型(只能一个小数点)
onlyFloat(input, binding.value);
}
input.dispatchEvent(new Event("input"));
};
// 浮点数
function onlyFloat(input, n) {
let value = input.value;
value = value.replace(/[^\d.]/g, "");
value = value.replace(/^\./g, "");
value = value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
if (n && Number(n) > 0) {
// 限制n位
var d = new Array(Number(n)).fill("\\d").join("");
var reg = new RegExp(`^(\\-)*(\\d+)\\.(${d}).*$`, "ig");
value = value.replace(reg, "$1$2.$3");
}
if (value && !value.includes(".")) {
value = Number(value).toString(); // 去掉开头多个0
}
input.value = value;
}
}
}