import Vue from 'vue';
Vue.directive('zbzCheck', {
componentUpdated: function (el, binding) {
// .w-input__inner input class名
const input = el.querySelector('.w-input__inner');
input.oninput = function (e) {
// 只能输入数字和小数点
input.value = input.value.replace(/[^\d.]/g, '');
// 必须保证第一个为数字而不是.
input.value = input.value.replace(/^\./g, '');
// 保证只有出现一个.而没有多个.
input.value = input.value.replace(/\.{2,}/g, '');
// 保证小数位最多4位
input.value = input.value
.replace('.', '$#$')
.replace(/\./g, '')
.replace('$#$', '.');
let count = -1;
for (let i in input.value) {
if (input.value[i] === '.') {
count = i;
}
if (count !== -1) {
if (i - count > 4) {
input.value = input.value.substring(0, input.value.length - 1);
}
}
}
// 限制输入长度最多为12位
if (input.value.length > 13) {
input.value = input.value.slice(0, 12);
}
// 限制最大值 整数8位 小数4位
if (Number(input.value) > 99999999.9999) {
input.value = '';
}
};
},
});
在使用的地方直接加上这个指令就可以了，示例如下
<input
v-model="value"
v-zbz-check
/>
