vue指令限制input输入金额 / 禁止粘贴

直接上代码:

export default {

inserted(el,vDir, vNode) {

// vDir.value 有指令的参数

        let content ='';

        let defaultPrecision =2;

        let defaultMax =999999999.99; // 999999999.99

        let defaultMin =0;

        let $inp =findEle(el, 'input');

        el.$inp = $inp;

        //按键按下=>只允许输入 数字/小数点

        el.addEventListener("keypress", event => {

            let e = event || window.event;

            let inputKey = String.fromCharCode(typeof e.charCode ==='number' ? e.charCode : e.keyCode);

            let arg_precision =parseFloat(vDir.value && vDir.value.precision >=0 ? vDir.value.precision : defaultPrecision);

            let re =/\d|\./;

            content = e.target.value;

            //定义方法,阻止输入

            function preventInput(){

                if (e.preventDefault) {

                    e.preventDefault();

                }else {

                    e.returnValue =false;

                }

            }

            if (!re.test(inputKey) && !e.ctrlKey) {

                preventInput();

            }else if ((content.indexOf(".") >0 && inputKey ==".") || (arg_precision ===0 && inputKey ==='.')) {

                //已有小数点,再次输入小数点

                preventInput();

            }

        });

        //按键弹起=>并限制最大最小    "keydown" :防止长按数字键监听不到的情况

        ["keyup", "keydown", "focusout"].forEach(function(item,index){

            el.addEventListener(item, event => {

                let e = event || window.event;

                let val = e.target.value;

                val = val.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符

                if(val ==='.'){

                    val ='';

                }

                if(val !== e.target.value){

                    vNode.componentInstance.$emit('input', val);

                    return;

                }

                content =parseFloat(val);

                if (!content) {

                    return;

                }

                let arg_max =parseFloat(vDir.value && vDir.value.max ? vDir.value.max : defaultMax);

                let arg_min =parseFloat(vDir.value && vDir.value.min ? vDir.value.min : defaultMin);

                let arg_precision =parseFloat(vDir.value && vDir.value.precision >=0 ? vDir.value.precision : defaultPrecision);

                let index = val.indexOf(".");

                if(arg_max && content > arg_max){

                    val = val.substr(0, val.length-1);

                }

                if(arg_min && content < arg_min){

                    val = arg_min;

                }

                if(arg_precision >=0){// 处理精度

                    val = val.substr(0, index >=0 ? (index + arg_precision +1) : (val.length +1))

                }

                if(index === (val.length -1) && arg_precision ===0){// 当精度为0,且输入的最后一位为小数点

                    val = val.substr(0, index)

                }

                vNode.componentInstance.$emit('input', val)

            });

        })

    },

}

最重要的就是  vNode.componentInstance.$emit('input', val) 这一行代码,因为v-model指令其实就是input输入框双向绑定的语法糖,所以实时更新的时候需要在指令里手动触发input事件。

禁止粘贴:

export default {

    inserted(el,vDir, vNode) {

    //按键弹起

        ["paste"].forEach(function(item,index){

            el.addEventListener(item, event => {

                let e = event || window.event;

                if (e.preventDefault) {

                    e.preventDefault();

                }else {

                    e.returnValue =false;

                }

            });

        })

    },

}

你可能感兴趣的:(vue指令限制input输入金额 / 禁止粘贴)