扩展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命令,收益良多,但是已经不能满足于我,所以补充了下. 再者 好久没发帖了,最近论坛老司机们都在讨论/总结,我就用这个干货回报吧. 最后 基于 ...
随机推荐
- Visual Studio 2017部署方法
1.打开官网下载链接 https://www.visualstudio.com/zh-hans/downloads/ 2.选择适合的版本,选择下载,进入下载界面 如果无反应,点击请单击此处重试,开始下 ...
- rancher2.0快速入门
注意:本入门指南的目的是让您快速的运行一个Rancher2.0环境,它不适用于生产.有关更全面的说明,请查阅Rancher安装. 本教程将指导您完成: 安装Rancher v2.0 : 创建第一个集群 ...
- ionic2踩坑之兼容android4.3及以下版本
一个命令就行了 ionic plugin add cordova-plugin-crosswalk-webview --save 执行完之后重新打包. 但是如果要兼容4.0及以下的话.... 帮不了你 ...
- Dubbo的集群容错与负载均衡策略
Dubbo的集群容错策略 正常情况下,当我们进行系统设计时候,不仅要考虑正常逻辑下代码该如何走,还要考虑异常情况下代码逻辑应该怎么走.当服务消费方调用服务提供方的服务出现错误时候,Dubbo提供了多种 ...
- linux系统加固方案
Linux主机操作系统加固规范 目 录 第1章 概述... 1 1.1 目的... 1 1.2 适用范围... 1 1.3 适用版本... 1 1 ...
- mabatis中的元素属性
resultMap属性id 唯一标识type 返回类型extends 继承别的resultMap,可选关联其他标签id 设置主键使用,使用此标签配置映射关系(可能不止一个)result 一般属性的配置 ...
- IP 数据报
IP 数据报 1.IP 数据报的格式 一个 IP 数据报由首部和数据两部分组成.(数据报也可以说是数据包) 首部的前一部分是固定长度,共 20 字节,是所有 IP 数据报必须具有的. 在首部的固定部分 ...
- Zookeeper的使用场景和集群配置
Zookeeper的介绍 ZK在分布式系统的应用 Zookeeper搭建 集群角色介绍 ZK的常用命令 一.Zookeeper的介绍 官方:ZooKeeper是一个分布式的,开放源码的分布式应用程序协 ...
- 从0开发3D引擎(补充):介绍领域驱动设计
我们使用领域驱动设计(英文缩写为DDD)的方法来设计引擎,在引擎开发的过程中,领域模型会不断地演化. 本文介绍本系列使用的领域驱动设计思想的相关概念和知识点,给出了相关的资料. 上一篇博文 从0开发3 ...
- 位运算基础(Uva 1590,Uva 509题解)
逻辑运算 规则 符号 与 只有1 and 1 = 1,其他均为0 & 或 只有0 or 0 = 0,其他均为1 | 非 也就是取反 ~ 异或 相异为1相同为0 ^ 同或 相同为1相异为0,c中 ...