zoukankan      html  css  js  c++  java
  • 扩展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精度值

  • 相关阅读:
    Linux的kobject机制
    利用内核模块添加系统调用
    register_sysctl_table实现内核数据交互
    设计模式17---享元模式
    设计模式16---中介者模式
    java实现PV操作
    设计模式15---桥接模式
    设计模式15---迭代器模式
    设计模式14---组合模式
    设计模式13---备忘录模式
  • 原文地址:https://www.cnblogs.com/wangxiaoer5200/p/11595897.html
Copyright © 2011-2022 走看看