扩展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精度值
扩展el-input 加一个控制精度的命令(directives)的更多相关文章
- 通过JS 给这个input加一个事件 获得焦点,回车事件绑定
通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...
- mysql 的 help 命令:每个命令,都有相应的反斜杠(\)加一个字母或字符的简写
mysql> help For information about MySQL products and services, visit: http://www.mysql.com/ For d ...
- linux命令后加一个 &
默认情况下,进程是在前台运行的,这时就把shell给占据了,我们无法进行其它操作.对于那些没有交互的进程,很多时候,我们希望将其在后台启动,可以在启动参数的时候加一个'&'实现这个目的. ti ...
- JS实现input中输入数字,控制每四位加一个空格(银行卡号格式)
前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法! ...
- input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格
以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...
- 一个linux常见命令的列表
这是一个linux常见命令的列表. 那些有• 标记的条目,你可以直接拷贝到终端上而不需要任何修改,因此你最好开一个终端边读边剪切&拷贝. 所有的命令已在Fedora和Ubuntu下做了测试 命 ...
- 一个执行Dos命令的窗口程序,与各位分享。
一个执行Dos命令的窗口程序,与各位分享. 效果图: 具体实现在代码中有详细的注释,请看代码. 实现执行CMD命令的核心代码(Cmd.cs): [csharp] using S ...
- 从Spring容器的角度理解Dubbo扩展点的加载时机
对于Dubbo提供的扩展点,主程序执行的过程中并没有显示调用加载的过程,无论是自激活的Filter还是自适应的ThreadPool.那么这样的扩展点在程序运行的哪个节点调用的呢?跟踪之前性能监控扩展点 ...
- 分享一个常用Adb命令
分享一个常用Adb命令 首先 首先感谢@xuxu的常用adb命令,收益良多,但是已经不能满足于我,所以补充了下. 再者 好久没发帖了,最近论坛老司机们都在讨论/总结,我就用这个干货回报吧. 最后 基于 ...
随机推荐
- [LC] 70. Climbing Stairs
You are climbing a stair case. It takes n steps to reach to the top. Each time you can either climb ...
- https协议 和 Charles 进行https抓包原理
本文转载自:https://blog.csdn.net/fox64194167/article/details/80387696 1.对称加密 其变成复杂的加密密文发送出去.收信方收到密文后,若想解读 ...
- 吴裕雄--天生自然 人工智能机器学习实战代码:LASSO回归
import numpy as np import matplotlib.pyplot as plt from sklearn import datasets, linear_model from s ...
- json/xml processing model与xml和json的简要区别
1.JavaScript Object Notation(JSON) JSON是一种轻量级数据交换格式,广泛用作通用格式,用于序列化和反序列化通过Internet相互通信的应用程序中的数据.这些应用程 ...
- tips [ 18870 ]
Created at 2017-08-23 Updated at 2018-01-31 Category 东方大陆 Tag 东方大陆 上面有编辑时间的,别吐槽说什么过期内容了使用 lightPIC图床 ...
- 不同环境下的mvn运行指令
///////////////// 研发环境 //////////////////////////////////////// 清空环境: mvn clean -DAPP_ENV=dev 建立Ecli ...
- Hihocoder1456 Rikka with Lattice
众所周知,萌萌哒六花不擅长数学,所以勇太给了她一些数学问题做练习,其中有一道是这样的:勇太有一个$n times m$的点阵,他想要从这$n times m$个点中选出三个点 ${A,B,C}$,满足 ...
- Haproxy的应用
如上图所示,在 192.168.1.0/24 这个网段的客户端想要访问在 172.20.0.0/20 网段内的服务器,所有的通信又不想暴露在互联网上,因此可以在这两个网段内分别都放一台 Haproxy ...
- NVARCHAR(MAX) 的最大长度
本文使用的环境是SQL Server 2017, 主机是64位操作系统. 大家都知道,Micorosoft Docs对 max参数的定义是:max 指定最大的存储空间是2GB,该注释是不严谨的: nv ...
- 作为前端,你需要懂得javascript实现继承的方法
在ES6之前,javascript不跟其他语言一样,有直接继承的方法,它需要借助于构造函数+原型对象模拟实现继承.现在我们可以利用ES6的extends方法实现继承,如果想了解更多有关ES6实现的继承 ...