vue里怎么控制input里只能输入正负浮点数，且能控制整数和小数的位数？

Question

vue里怎么控制input里只能输入正负浮点数，且能控制整数和小数的位数？网上很多正则都不靠谱，实测无效，要么就是不满足需求，求一份可用的，感谢！

Answer 1

可以使用自定义指令实现

/**
 * 支持输入正负浮点数
 * 如果需要输入负数，则在input中加上 v-enterFloat="{ negative: true }"
 * 如果需要输入正数，则直接使用v-enterFloat
 */
enterFloat: {
        update: function (el, { value, modifiers }, vnode) {
            try {
                let a_el = el.children[0];
                let first = a_el.value.charAt(0);
                //此处可以debug看看el具体值是什么,这里演示的是原生控件input,如果是使用element中的<el-input />标签,需要通过 el.children[0] 拿到原生input.
                if (!a_el.value) {
                    return false;
                }
                a_el.value = a_el.value
                    .replace(/[^\d.]/g, '')
                    .replace(/\.{2,}/g, '.')
                    .replace('.', '$#$')
                    .replace(/\./g, '')
                    .replace('$#$', '.')
                    .replace(/^(\-)*(\d+)\.(\d{1,10}).*$/, '$1$2.$3')
                    .replace(/^\./g, '')
                if (a_el.value.indexOf(".") < 0 && a_el.value != "") {
                    a_el.value = parseFloat(a_el.value);
                }
                if (value && value.negative && first == "-") {
                    a_el.value = "-" + a_el.value;
                }
                a_el.dispatchEvent(new Event(modifiers.lazy ? "change" : "input"));
            } catch (e) { }
        },
    },