Vue Input Indicates the decimal point control command

demo

The directive name can be customized, but the name is arbitrary to distinguish it from other directives

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

Parameter name said

• V-number162minus :6 instructions limit the number of decimal points to 6
• {row: formData, prop: ‘sigmaPar’} Changes the value to sigmaPar on fromData

Instruction source

• vnode.data.model.callback(“-” + row[prop]); Warning – Do not use the virtual DOM for processing

/ * * *@name Decimal point floating point * < 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: object,prop: field name}" */
let eventInputChange = (ev, el, vnode, event) = > {
    let { row, prop } = el.value;
    let { value } = ev.querySelector("input");
    let reg = /[^\.\d\-]/gi; // comment: /[^\.^ 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; // comment: /[^\.^ d^ -]/gi;
    // num = num.split(".");
    // let regMin = /[^\.^\d^\-]/i;
    num = num.replace(reg, "");
    let number = "";
    if (/^\-/i.test(num) && num.length > 1) {
        // indicates a minus sign
        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); }};// Round off
// 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);
// }

// Round off
// function currToFixed(value, decimal) {
// const n = Math.pow(10, decimal);
// return divideFloat(Math.round(multiplyFloat(value, n)), n).toFixed(decimal);
// }

/** * multiply with decimal *@param {Number} arg1- factor *@param {Number} arg2- factor * /
// 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);
// }

/** * has decimal division *@param {Number} arg1- divisor *@param {Number} arg2- Dividend */
// 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);
// }

Copy the code