使用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)的更多相关文章

  1. 通过JS 给这个input加一个事件 获得焦点,回车事件绑定

    通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...

  2. mysql 的 help 命令:每个命令,都有相应的反斜杠(\)加一个字母或字符的简写

    mysql> help For information about MySQL products and services, visit: http://www.mysql.com/ For d ...

  3. linux命令后加一个 &

    默认情况下,进程是在前台运行的,这时就把shell给占据了,我们无法进行其它操作.对于那些没有交互的进程,很多时候,我们希望将其在后台启动,可以在启动参数的时候加一个'&'实现这个目的. ti ...

  4. JS实现input中输入数字,控制每四位加一个空格(银行卡号格式)

    前言 今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法! ...

  5. input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格

    以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...

  6. 一个linux常见命令的列表

    这是一个linux常见命令的列表. 那些有• 标记的条目,你可以直接拷贝到终端上而不需要任何修改,因此你最好开一个终端边读边剪切&拷贝. 所有的命令已在Fedora和Ubuntu下做了测试 命 ...

  7. 一个执行Dos命令的窗口程序,与各位分享。

    一个执行Dos命令的窗口程序,与各位分享.   效果图:     具体实现在代码中有详细的注释,请看代码.   实现执行CMD命令的核心代码(Cmd.cs):   [csharp]   using S ...

  8. 从Spring容器的角度理解Dubbo扩展点的加载时机

    对于Dubbo提供的扩展点,主程序执行的过程中并没有显示调用加载的过程,无论是自激活的Filter还是自适应的ThreadPool.那么这样的扩展点在程序运行的哪个节点调用的呢?跟踪之前性能监控扩展点 ...

  9. 分享一个常用Adb命令

    分享一个常用Adb命令 首先 首先感谢@xuxu的常用adb命令,收益良多,但是已经不能满足于我,所以补充了下. 再者 好久没发帖了,最近论坛老司机们都在讨论/总结,我就用这个干货回报吧. 最后 基于 ...

随机推荐

  1. 吴裕雄--天生自然Android开发学习:1.2.1 使用Eclipse + ADT + SDK开发Android APP

    1.前言 这里我们有两条路可以选,直接使用封装好的用于开发Android的ADT Bundle,或者自己进行配置 因为谷歌已经放弃了ADT的更新,官网上也取消的下载链接,这里提供谷歌放弃更新前最新版本 ...

  2. 重复测量的方差分析|Mauchly's Test of Sphericity|

    生物统计学-重复测量的方差分析 之前的方差分析应用条件要求组之间是独立的,即某种因素下相同时段测量的结果数据,但4月与5月数据是有关系的,所以必须考虑某种因素下不同时段测量的结果数据,即使用重复测量的 ...

  3. 自定义servlet重写doGet或doPost方法是如何实现多态的

    我们知道,如果我们自定义一个servlet继承HttpServlet,并且重写HttpServlet中的doGet或doPost方法,那么从浏览器发送过来的request请求将调用HttpServle ...

  4. 吴裕雄--天生自然python学习笔记:Python3 标准库概览

    操作系统接口 os模块提供了不少与操作系统相关联的函数. >>> import os >>> os.getcwd() # 返回当前的工作目录 'C:\\Python ...

  5. Nginx笔记总结十六:nginx优化指南

    1.高层的配置 worker_processes 定义了nginx对外提供web服务时的worker进程数 worker_rlimit_nofile 更改worker进程最大打开文件数量限制,如果没有 ...

  6. mybatis-generator二次开发总结

    二次开发(此文只作记录,具体代码及文章在内网,copy不出来) 自定义生成代码需求: 1.去除默认生成的example接口方法: (1)配置generatorConfig.xml (2)修改源码tab ...

  7. Java Timer和TimerTask

    Timer是JDK中提供的一个定时器工具,使用的时候会在主线程之外起一个单独的线程执行指定的任务,可以指定一次或多次. TimerTask是一个实现了Runnable接口的抽象类,代表一个可被执行的任 ...

  8. JAVA9中文API百度网盘免费下载

    JAVA9中文API百度网盘免费下载: https://pan.baidu.com/s/1tvHYQA8yyAS4xUFxwWrx_Q 提取码: 6e5h

  9. spring-boot-学习笔记(三)-过滤器

      过滤器有两种配置方式,一种是通过注解来完成,一种是通过自定义配置类来设置 这里假设的场景是,定义一个过滤器,过滤所有请求,如果参数中没有username信息则重定向到login_page登录页面, ...

  10. wabpack踩坑

    webpack 打包时会用 NODE_ENV 来标识是生产环境还是开发环境光, "build": "NODE_ENV=production webpack", ...