vue input 小数点控制指令

demo

指令名称可以自定义，此处为了跟其他指令区分取名字比较随意

<el-input  v-model="formData.sigmaPar"
           v-number162minus:6="{ row: formData, prop: 'sigmaPar' }"/>

参数说名

• v-number162minus:6 指令限制6位小数点
• { row: formData, prop: 'sigmaPar' } 修改的值在 fromData上 sigmaPar

指令源码

• vnode.data.model.callback("-" + row[prop]); 警告-切记不要使用虚拟dom来处理

/**
 * @name 小数点浮点
 * <el-input  v-model="formData.sigmaPar"
              v-number162minus:6="{ row: formData, prop: 'sigmaPar' }"/>
 * @template jsx：directives = [{ name: "TableNumber", value: {row,prop}, arg:4 }
 * @template vue: v-TableNumber:4="{row:对象,prop:字段名}"
 */
let eventInputChange = (ev, el, vnode, event) => {
    let { row, prop } = el.value;
    let { value } = ev.querySelector("input");
    let reg = /[^\.\d\-]/gi; // 注释： /[^\.^\d^\-]/gi;
    let arr = value.split(".");

    if (/^\-/i.test(arr[0]) && arr[0].length > 1) {
        value = "-" + value.substr(1, value.length).replace(/\-/, "");
    }
    if (arr[0].length > 12) {
        value = `${arr[0].substr(0, 12)}${arr[1] ? "." + arr[1] : ""}`;
    }
    value = value == "" ? "" : value.replace(reg, "");

    row[prop] = value;
    
   // event.target.value = value;
    //vnode.data.model.callback(value);
    // console.log(value);
    //el.value[el.arg] = value;
};
let eventInputBlur = (ev, el, vnode, event) => {
     
    let { row, prop } = el.value;
    // let num = ev.getElementsByTagName("input")[0].value;
    let { arg = 0 } = el;
    let num = row[prop].trim();
    let reg = /[^\.\d\-]/gi; // 注释： /[^\.^\d^\-]/gi;
    // num = num.split(".");
    // let regMin = /[^\.^\d^\-]/i;
    num = num.replace(reg, "");
    let number = "";
    if (/^\-/i.test(num) && num.length > 1) {
        // 表示有负号
        num = num.substr(1, num.length).replace(/\-/, "");
        number = num === "" ? "" : String(arg ? parseFloat(num).toFixed(arg) : parseFloat(num));
        // number = num === "" ? "" : String(arg ? currToFixed(num, arg) : parseFloat(num));
        if (number === "") {
            row[prop] = "";
        } else {
            let arr = number.split(".");
            let computed = arr[0]
                .split("")
                .reverse()
                .join("")
                .replace(/(\d{3})/gi, "$1,")
                .split("")
                .reverse()
                .join("")
                .replace(/^,/gi, "");
            row[prop] = `${computed || ""}${arr[1] ? "." + arr[1] : ""}`;
        }
        //event.target.value = "-" + row[prop];
       // vnode.data.model.callback("-" + row[prop]);
        
    } else {
        // debugger;
        number = num === "" ? "" : String(arg ? parseFloat(num).toFixed(arg) : parseFloat(num));
        // number = num === "" ? "" : String(arg ? currToFixed(num, arg) : parseFloat(num));
        if (number === "") {
            row[prop] = "";
        } else {
            let arr = number.split(".");
            let computed = arr[0]
                .split("")
                .reverse()
                .join("")
                .replace(/(\d{3})/gi, "$1,")
                .split("")
                .reverse()
                .join("")
                .replace(/^,/gi, "");
            row[prop] = `${computed || ""}${arr[1] ? "." + arr[1] : ""}`;
        }
        //event.target.value = row[prop];
       // vnode.data.model.callback(row[prop]);
    }
    vnode.context.$forceUpdate();
};
let eventInputFocus = (ev, el, vnode) => {
    // debugger;
    let { row, prop } = el.value;
    let num = String(row[prop])
        .trim()
        .replace(/,/gi, "");
    row[prop] = num;
   // vnode.data.model.callback(row[prop]);
};

export let number162minus = {
    bind(el, binding, vnode) {
        
        let input = el.querySelector("input");
        input.addEventListener("focus", eventInputFocus.bind(this, el, binding, vnode), false);
        el.addEventListener("input", eventInputChange.bind(this, el, binding, vnode), false);
        input.addEventListener("blur", eventInputBlur.bind(this, el, binding, vnode), false);
    }
};

// 四舍五入
// export function currToFixed(num, s) {
//     return (Math.round(num * Math.pow(10, s)) / Math.pow(10, s) + Math.pow(10, -(s + 1))).toString().slice(0, -1);
// }

// 四舍五入
// function currToFixed(value, decimal) {
//     const n = Math.pow(10, decimal);
//     return divideFloat(Math.round(multiplyFloat(value, n)), n).toFixed(decimal);
// }

/**
 * 带有小数的乘法运算
 * @param {Number} arg1 - 因数
 * @param {Number} arg2 - 因数
 */
// function multiplyFloat(arg1, arg2) {
//     let m = 0;
//     const arg1Str = arg1 + "";
//     const arg2Str = arg2 + "";
//     const arg1StrFloat = arg1Str.split(".")[1];
//     const arg2StrFloat = arg2Str.split(".")[1];
//     arg1StrFloat && (m += arg1StrFloat.length);
//     arg2StrFloat && (m += arg2StrFloat.length);
//     const transferResult = +arg1Str.replace(".", "") * +arg2Str.replace(".", "");
//     return transferResult / Math.pow(10, m);
// }

/**
 * 有小数的除法运算
 * @param {Number} arg1 - 除数
 * @param {Number} arg2 - 被除数
 */
// function divideFloat(arg1, arg2) {
//     const arg1Str = arg1 + "";
//     const arg2Str = arg2 + "";
//     const arg1StrFloat = arg1Str.split(".")[1] || "";
//     const arg2StrFloat = arg2Str.split(".")[1] || "";
//     const m = arg2StrFloat.length - arg1StrFloat.length;
//     const transferResult = +arg1Str.replace(".", "") / +arg2Str.replace(".", "");
//     return transferResult * Math.pow(10, m);
// }