/*
* @Description: 指令 - 控制只能输入纯数字or有小数点or正负整数or正负数有小数
* @Autor: ercyao
*/
// 示例： v-enter-number or v-enter-number.point or v-enter-number="{ args: 'point', dotCount: 2, maxNumber : 10, minNumber: 1, topNoZero:true }"
import Vue from "vue";
let options = {};
// let type = "number"; // 类型 { number: 纯数字 point：有小数点 neg：正负整数 pointNeg:正负数有小数 }
// let params = {}; // 传入参数
let lastValue = null; // 上一次输入的值（用于记录中文输入法下的）
// 获取传入的数据
function getTypeAndParmas(binding) {
let params = {}; // 传入参数
let type = "number"; // 类型 { number: 纯数字 point：有小数点 neg：正负整数 pointNeg:正负数有小数 }
// 获取类型和值
type =
(binding && binding.arg) ||
(binding && binding.value && binding.value.args) ||
"number";
if (
!binding.arg &&
(!binding.value || !binding.value.args) &&
binding.rawName
) {
let rawNames = binding.rawName.split(".");
rawNames.length > 1 && type == rawNames[1];
}
params = binding.value;
// console.log("binding.arg", type, binding, params);
return { params, type };
}
// 按键事件
function onKeypress(e, params, type) {
e = e || window.event;
let charcode = typeof e.charCode == "number" ? e.charCode : e.keyCode;
let re = /\d/;
switch (type) {
case "point":
re = /\d|\./;
break;
case "pointNeg":
re = /\d|\.|-/;
break;
case "neg":
re = /\d|-/;
break;
default:
re = /\d/;
break;
}
// 如果小数位已经是限制范围内的，就阻止输入
if (
["point", "pointNeg"].indexOf(type) > -1 &&
e.target.value &&
e.target.value.indexOf(".") > -1
) {
let dotCount = params.dotCount || 2;
let len = e.target.value.toString().split(".")[1].length;
if (len >= dotCount) {
e.preventDefault();
}
}
if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
if (e.preventDefault) {
// console.log("preventDefault---", e);
e.preventDefault();
} else {
// console.log("returnValue---", e);
e.returnValue = false;
}
}
}
// 输入事件
function onInput(e, LOCK, params, type) {
// console.log("输入事件-----------", lastValue, e.target.value, params);
if (!LOCK) {
let value = 0;
if (type == "point") {
let dotCount = params.dotCount || 2;
let reg = new RegExp("^\\d*(\\.?\\d{0," + dotCount + "})", "g");
value = e.target.value.match(reg)[0] || null;
// e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]
} else if (type == "pointNeg") {
let dotCount = params.dotCount || 2;
let reg = new RegExp("^\\-?\\d*(\\.?\\d{0," + dotCount + "})", "g");
value = e.target.value.match(reg)[0] || null;
} else if (type == "neg") {
value = e.target.value.replace(/[^\-?\d]/g, "") || null;
} else {
value = e.target.value.replace(/\D/, "") || null;
}
// 头部不要带0， 如果是值是两位，但其中一位不是小数点，就格式化下（处理01的情况）
e.target.value =
params &&
params.topNoZero &&
value &&
value.length == 2 &&
!value.includes(".") &&
value.includes("0")
? parseFloat(value)
: value;
lastValue = e.target.value;
// console.log('no-LOCK------------', e.target.value, lastValue)
} else {
let re = null;
if (type == "point" || type == "pointNeg") {
re = /\d|\./;
} else {
re = /\d/;
}
if (re.test(e.target.value)) {
let len = e.data ? e.data.length : 1;
// 如果是中文输入法下的输入中文处理
if (/.*[\u4e00-\u9fa5]+.*$/.test(e.target.value)) {
e.target.value = e.target.value.slice(
0,
e.target.value.length - len
);
// console.log('中文输入法-中文处理--------', e.target.value, lastValue)
} else {
// 中文输入法下输入拼音却按下回车变成英文字符串
if (e.target.value == lastValue) {
e.target.value = e.target.value.slice(
0,
e.target.value.length - len
);
}
// console.log(' 中文输入法-英文字符串--------', e.target.value, lastValue)
}
lastValue = e.target.value;
// console.log('lastValue------------', lastValue, e.target.value)
} else {
e.target.value = lastValue;
// console.log('LOCK---不是数字--------', lastValue, e.target.value)
}
}
// 处理限制最大和最小值
if (params && params.maxNumber && e.target.value > params.maxNumber) {
// console.log('大于最大值------------', params.maxNumber)
e.target.value = params.maxNumber;
return;
}
if (params && params.minNumber && e.target.value < params.minNumber) {
// console.log('小于最小值------------', params.minNumber)
e.target.value = params.minNumber;
return;
}
}
// 使用方法： v-enter-number
Vue.directive("enterNumber", {
bind: function(el, binding) {
options = getTypeAndParmas(binding);
},
inserted: function(el, binding) {
let LOCK = false; //是否开启中文输入法
el.addEventListener(
"compositionstart",
e => {
lastValue = null;
LOCK = true; //加上锁
// console.log('compositionstart', e.target.value)
},
false
);
el.addEventListener(
"compositionend",
e => {
LOCK = false; // 解锁
// console.log('compositionend', e.target.value)
},
false
);
//失去焦点=>保留指定位小数
// el.addEventListener(
// 'keyup',
// (e) => {
// console.log('keyup', e.target.value)
// },.native
// false
// )
el.addEventListener("keypress", function(e) {
LOCK = false;
options = getTypeAndParmas(binding);
// console.log("keypress--------", e.target.value);
onKeypress(e, options.params, options.type);
});
el.addEventListener(
"input",
e => {
options = getTypeAndParmas(binding);
// console.log("-----input--------", binding, e.target.value);
onInput(e, LOCK, options.params, options.type);
},
false
);
el.addEventListener(
"paste",
e => {
e.preventDefault();
},
false
);
},
update: function(el) {
el.addEventListener(
"paste",
e => {
e.preventDefault();
},
false
);
}
});
示例
<el-input v-model.trim="amount" v-enter-number="{ args: 'point', dotCount: 2 }"/>
