扩展el-input 加一个控制精度的命令

Posted 2020-11-16 进军的王小二

使用el-input时 出现需要精度控制的需求，因为每一个el-input需要精度不用 所以我给这个虚拟dom绑定了一个精度值，根据这个值去控制精度。

下面附上代码：

html：

<el-input
v-numberInt=‘field.data.text‘
:colPrecision=‘field.colPrecision‘
v-model="field.data.text"
>{{ field.data.text }}</el-input>

js：

directives: {

numberInt: {
bind(el, binding, vnode) {
const element = el.getElementsByTagName(‘input‘)[0];
const len = vnode.data.attrs.colPrecision; // 初始化设置 获取需要设置的精度
element.value = Number(element.value).toFixed(len); // 失焦时候格式化
element.addEventListener(‘blur‘, function() {
if (isNaN(element.value)) {
vnode.data.model.callback(0);
} else {
let arr = element.value.toString().split(‘.‘);
if (arr.length > 1 && arr[1].length > len) { //只有满足超过精度的情况才触发 不然保持不变
vnode.data.model.callback(Number(element.value).toFixed(len));
} else {
vnode.data.model.callback(Number(element.value));
}
}
});
}
}
}

ps：如果你要控制固定精度 更加简单,比如控制两位小数 v-numberInt:2=‘field.data.text‘ binding一个2，用const len = binding.arg; 来获取这个binding精度值