price.js

import Vue from 'vue'
//input 限制输入正整数以及自定义小数位数
//v-price
//v-price="{digit:4}"
Vue.directive('price', {
    inserted: function (el, binding, vnode) {
        el.addEventListener('input', function () {
            if (binding.value) {
                checkValue(el, binding.value.digit)
            } else {
                checkValue(el, 3)
            }
        })

        function checkValue(el, defu) {
            let num = new RegExp(`(^[\\-0-9][0-9]*(.[0-9]+)?)$`) // 是否为数字
            let littleNum = new RegExp(`^(0|[1-9]\\d{0,${defu}})(\\.\\d{1,${defu}})?$`)//自定义小数位数
            if (el.value &&!num.test(+el.value)) {
                el.value = el.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
                el.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新
            }
            if (el.value && !littleNum.test(+el.value)) {
                el.value = el.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
                el.value = el.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
                el.value = el.value.replace(new RegExp(`^(.*\\..{${defu}}).*$`), "$1");//只能输入自定义个小数
                el.dispatchEvent(new Event("input"));//调用input事件使vue v-model绑定更新
            }
        }
    }

})