扩展el-input 加一个控制精度的命令(directives)
使用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精度值
最新文章
- 在Javascript中onclick()方法应用
- SQLserver 查看数据库包含指定数据的表(字段)
- Centos6.6下安装MariaDB步骤,利用yum进行安装 第二篇
- H5版俄罗斯方块(3)---游戏的AI算法
- C语言位运算详解
- 玄机网C#论坛测试小游戏
- 解决Ubuntu root账户的问题
- 提示让IE8以下版本的浏览器去更新浏览器
- MySQL备份常用命令总结
- centos7配置Apache支持HTTPS
- Centos7 出现Welcome to emergency mode!
- 【转】Android总结篇系列:Activity Intent Flags及Task相关属性
- link-hover-visited-active
- ZOJ 4062 - Plants vs. Zombies - [二分+贪心][2018 ACM-ICPC Asia Qingdao Regional Problem E]
- 转:IOS:查找SDK路径和Framework头文件
- Design Pattern: Gof
- 通过iframe标签绕过csp
- 数学图形(2.23)Cylindric sine wave柱面正弦曲线
- sklearn中的predict与predict_proba的区别(得到各条记录每个标签的概率(支持度))
- 【Java】仿真qq尝试:用户注册(二)