input--vue指令：格式化输入内容（保留两位小数）

一、开发中经常会遇到格式化输入内容的问题，尤其是【限制输入两位小数】。今天就来实现下，基于vue框架的格式化功能，使用自定义指令的方式实现。使用场景最多的地方便是，输入数字且最多保留两位小数，或者直接要求输入的是* 金钱 *。附赠格式化输入为正整数的实现。

二、不得不说：关于vue的directive指令，官方建议是【除了 el 之外，其它参数都应该是只读的，切勿进行修改】。但是，但是，但是，如果真是老老实实按照官方的说法去做，可能我们便不能实现这个指令了。最关键也是必须违反规则的做法，便是下面这段代码：

param.obj[param.key] = input$.value

param便是指令的绑定值binding.value，你看，是不是和川建国对着干了。但若是舍去这段代码，我们便没法实现中华民族的伟大复兴了。事实上这段代码不会造成任何负面的影响，请放心吧！

三、接下来的这段代码，我相信只有是个weber，都应该看过，你会觉得很熟。它便是人人喜爱的，在很多博客文章中都看到过的--保留两位小数。

newValue = v
        .replace(/[^\d.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')

但是，这段代码并不完美，有些边界情况并没有考虑到，譬如：012，显然我们是不能输入它的，首位怎么能是0呢？所以请看下面我对边界情况的判断。（这个时候我就不知道如何加正则了，简单点if干起！）

function goldChange(v) {
    let newValue = v.toString()
    newValue = v
        .replace(/[^\d.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
    if (
        newValue.length > 1 &&
        newValue.indexOf('.') !== 1 &&
        newValue.indexOf('0') === 0
    ) {
        newValue = newValue.toString().substring(1)
    }
    return newValue
}

四、到现在为止，关键的输入时（输入框的input事件）的处理我们已经做了，但是，不够啊。都还要处理输入框失焦时（chang事件）的问题。小数点后没数字时，是补0呢还是去掉小数点只显示整数部分，以及补几个0的问题，这些在输入时是不能去做的，所以要等到失去焦点时才可以。参数includeZero表示是否自动补位，补齐两位小数。

function goldBlur(v, includeZero) {
    let nv = v.replace(/\.$/, '')
    if (!includeZero) {
        return nv
    } else {
        if (nv.indexOf('.') === -1) {
            return nv + '.00'
        } else {
            return nv.split('.')[1].length === 1 ? nv + '0' : nv
        }
    }
}

五、哎呀，算了，不写了，累！

来啊小二，上酒！

const formatNumber = {};
let listenAction;
formatNumber.install = Vue => {
    /**
     * // 根据需求不断扩展
     * value格式：v-formatNumber="{type: 'gold', includeZero: true, obj: obj, key: key}"
     * 
     * type: 格式化方式，integer（正整数）、gold（保留两位小数的金钱格式）
     * includeZero：type为integer时（可选 包含0），type为gold时（表示是否自动补位）
     * obj、key 可选 兼容对象属性可能没有更新的情况
     */
    Vue.directive('slFormatNumber', {
        bind(el, binding) {
            const validate = {
                init: function (param) {
                    switch (param.type) {
                        case 'integer': this.setInteger(param); break
                        case 'gold': this.setGold(param); break
                        default: console.log('暂不支持此格式化方式');break
                    }
                },
                setInteger: function (param) {
                    const input$ = el.getElementsByTagName('input')[0];
                    const strToInteger = () => {
                        const reg = '/[^\d]/g';
                        let _value = parseInt(input$.value.replace(reg, ''));
                        _value = _value ? _value : param.includeZero && _value === 0 ? _value : '';
                        input$.value = _value;
                        if (param.obj && param.key) {
                            param.obj[param.key] = input$.value;
                        }
                    };
                    validate.addEvent(input$, ['input'], strToInteger);
                },
                setGold: function (param) {
                    const input$ = el.getElementsByTagName('input')[0]
                    const funChange = () => {
                        input$.value = goldChange(input$.value)
                        param.obj[param.key] = input$.value
                    }
                    const funBlur = () => {
                        input$.value = goldBlur(input$.value, param.includeZero)
                        param.obj[param.key] = input$.value
                    }
                    validate.addEvent(input$, ['input'], funChange)
                    validate.addEvent(input$, ['change'], funBlur)
                },
                addEvent(el, eventName, eventFn) {
                    eventName.forEach(name => {
                        el.addEventListener(eventName, eventFn);
                    })
                }
            };
            validate.init(binding.value);
        }
    })
};

function goldChange(v) {
    let newValue = v.toString()
    newValue = v
        .replace(/[^\d.]/g, '')
        .replace(/\.{2,}/g, '.')
        .replace('.', '$#$')
        .replace(/\./g, '')
        .replace('$#$', '.')
        .replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')
    if (
        newValue.length > 1 &&
        newValue.indexOf('.') !== 1 &&
        newValue.indexOf('0') === 0
    ) {
        newValue = newValue.toString().substring(1)
    }
    return newValue
}
function goldBlur(v, includeZero) {
    let nv = v.replace(/\.$/, '')
    if (!includeZero) {
        return nv
    } else {
        if (nv.indexOf('.') === -1) {
            return nv + '.00'
        } else {
            return nv.split('.')[1].length === 1 ? nv + '0' : nv
        }
    }
}

export default formatNumber

六、如何使用呢，来来来，李子来啊，报国啊！

// 李子1
// this.num

// 李子1
// this.obj.num

END：又是摸鱼的一天，下班了，886！