使用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. JavaScript学习总结(一)基础部分

    转自:http://segmentfault.com/a/1190000000652749 基本概念 javascript是一门解释型的语言,浏览器充当解释器. js执行引擎并不是一行一行的执行,而是 ...

  2. 启动Tomcat报WEB-INF\lib\j2ee.jar jar not loaded异常的解决办法

    今天加载工程时突然发现Tomcat报: 2010-7-1 12:11:38 org.apache.catalina.loader.WebappClassLoader validateJarFile 信 ...

  3. 2015-09-14-初级string

    标准库string类型 string对象初始化 string s1; string s2(s1); string s3("value"); string s4(n,'c'); st ...

  4. springboot中使用异步的常用两种方式及其比较

    一般对于业务复杂的流程,会有一些处理逻辑不需要及时返回,甚至不需要返回值,但是如果充斥在主流程中,占用大量时间来处理,就可以通过异步的方式来优化.实现异步的常用方法远不止两种,但是个人经验常用的,好用 ...

  5. 杂谈php之什么是cgi,fastcgi,fpm,cli,mod

    杂谈PHP极少关注的问题 本话题来自于我使用PHP进行网页爬虫的一次经历.对于一个web开发者来说,PHP解释器本身却知之甚小,实在是惭愧呐! 首先这个话题要从几个提问开始. PHP是什么? 外文名: ...

  6. 神经网络的Python实现(一)了解神经网络

    网络上深度学习相关博客教程质量参差不齐,很多细节很少有文章提到,所以本着夯实深度学习基础的想法写下此系列博文. 本文会从神经网络的概述.不同框架的公式推导和对应的基于numpy的Python代码实现等 ...

  7. 日志框架之2 slf4j+logback实现日志架构 · 远观钱途

    如何从缤纷复杂的日志系统世界筛选出适合自己的日志框架以及slf4j+logback的组合美妙之处?此文可能有帮助 logback介绍 Logback是由log4j创始人设计的另一个开源日志组件,官方网 ...

  8. 张益肇:AI 医疗,微软有哪些布局?

    编者按:近几年来,医疗和人工智能碰撞出了相当多的火花,大量资金短期投入到医疗领域当中.然而在微软亚洲研究院副院长张益肇博士看来,人工智能医疗是一场持久战,大家一定要沉下心多调研.多思考.多学习. 人工 ...

  9. WTF is The BlockChain?

    最近区块链大热,走到哪儿都有人在讨论区块链和比特币,甚至于一些对密码学完全没有概念的人都开始大肆吹捧,不免让人嗤之以鼻.相信很多技术和非技术的朋友都希望能够更深层次地去了解它是如何工作的.本文将用不到 ...

  10. Ubuntu19.10安装OMNeT++ (omnetpp-5.6)中遇到的问题

    在官网上下载对应版本的安装包,里面有说明性的文档,先在第五章ubuntu那里配置好前期的环境,再到linux那一章,看进行安装,本文即从这里开始记录. 安装包中的文档目录为:omnetpp-5.6/d ...