使用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. [LC] 84. Largest Rectangle in Histogram

    Given n non-negative integers representing the histogram's bar height where the width of each bar is ...

  2. 整理struct sockaddr和struct sockaddr_in

    struct sockaddr定义在/usr/include/linux/socket.h struct sockaddr { unsigned short ss_family; - } struct ...

  3. dubbo分布式框架下web层调用业务层一直报空指针异常的解决办法

    java.lang.NullPointerException............... 环境:SSM(通用mapper)+Dubbo 1.检查导包 提示注解@Reference  应该导入  im ...

  4. unittest(22)- p2p项目实战(8)-test_class_auto_incre

    # 8.test_class_auto_incre # 使用ddt import requests import unittest from p2p_project_7.tools.http_requ ...

  5. fiddler https 您的连接不是私密连接 解决方法(不明原理但是照着做成功了,记录下)

    在桌面找到生成的证书 打开chrome chrome://settings/ 导入证书 再次运行fiddler,依次点击Tools下的Options,然后点HTTPS选项卡,再点击actions下的R ...

  6. Redis 中 byte格式 写入、取出

    实体类: package com.nf.redisDemo1.entity; import java.io.Serializable; public class News implements Ser ...

  7. TensorFlow_Faster_RCNN中demo.py的运行(CPU Only)

    GitHub项目地址,https://github.com/endernewton/tf-faster-rcnnTensorflow Faster RCNN for Object Detection. ...

  8. 实现子数组和绝对值差最小 - Objective-C

    类似于背包问题,前提条件是数组全是正整数和0,先求和Sum,再从子数组中找出接近Sum/2的子数组 @interface TempState : NSObject @property (nonatom ...

  9. 码海拾遗:简述C++(一)

    C++是Bjarne Stroustrup博士于1982年,在C语言的基础上引入并扩充了面向对象的概念后发明的一种新的程序语言.就与C语言的渊源而言,C++可以说是C语言的超集,它兼容C的一切(可能是 ...

  10. ES插件升级

    #!/bin/bash mkdir -p /home/esuser cd /home/esuser wget http://10.12.xx.xx:8090/search_plugins/sd_wai ...