一、开发中经常会遇到格式化输入内容的问题，尤其是【限制输入两位小数】。今天就来实现下，基于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
<el-input
placeholder="两位小数"
v-model="num"
v-formatNumber="{type: 'gold', obj: this, key: 'num'}"
>
</el-input>
// 李子1
// this.obj.num
<el-input
placeholder="两位小数"
v-model="obj.num"
v-formatNumber="{type: 'gold', obj: obj, key: 'num'}"
>
</el-input>
END：又是摸鱼的一天，下班了，886！
