痛点：PC管理后台项目中经常会有input 输入框需要进行格式校验。
例如：
- 输入正整数 1-100，
- 输入 整数
- 输入大于0的数字
- 输入数字 ....
等各种需求。
这个时候按照正常的写法
- 对不同业务里面的输入框单个进行格式化。
- 好的点做法对以上不同情况写几个自定义指令，然后套在
input上使用，额额额 让我写这么多指令 好烦啊，
有没有好的方案呢？答案是肯定的，让我们来看下接下来的做法，保证你能收获不少。O(∩_∩)O哈哈~
export default {
inserted(el, binding, vnode) {
/**
* 数字格式化，目前支持 正数 plus, 整数 int, 浮点正数 floatpos， 正常的浮点数，
* 以上方法都已去掉精度
* 使用方法如下：
* v-input-num.plus 正数
* v-input-num.int 整数
* v-input-num.floatpos 浮点正数
* v-input-num 正常的浮点数
*
* 特别需要注意的是：
* 1. 如果vnode.data.model存在，类似于element ui 组件的 el-input，不能直接使用e.target.value 去赋值，要不然表面上是格式化
* 了数字，但是实际提交的数字还是未格式化的，可以用vnode.data.model.callback(value)去赋值
* 2. 如果自己写的input，可以直接使用e.target.value 去赋值
*/
el.addEventListener('change', (e) => {
const { modifiers } = binding
const { value } = e.target
let val = 0 // 默认值为0
const valIsNaN = isNaN(parseInt(value, 10)) // 如果是NaN, 设置为0
if (!valIsNaN) {
// 正数
if (modifiers.plus) {
val = Math.abs(parseInt(value, 10))
} else if (modifiers.int) {
// 整数
val = parseInt(value, 10)
} else if (modifiers.floatpos) {
// 浮点正数,去精度
val = Math.abs(parseFloat(value).toFixed(2))
} else {
// 数字
val = parseFloat(parseFloat(value).toFixed(2))
}
}
/**
* 1. 如果vnode.data.model存在，类似于element ui 组件的 el-input，不能直接使用e.target.value 去赋值，要不然表面上是格式化
* 了数字，但是实际提交的数字还是未格式化的，可以用vnode.data.model.callback(value)去赋值
* 2. 如果自己写的input，可以直接使用e.target.value 去赋值
*/
if (vnode.data.model) vnode.data.model.callback(val)
else {
e.target.value = val
}
})
}
}
使用示例如下
// 正数
<el-input v-input-num.plus v-model="scope.row.abc" placeholder=""></el-input>
// 整数
<el-input v-input-num.int v-model="scope.row.abc" placeholder=""></el-input>
// 浮点正数
<el-input v-input-num.floatpos v-model="scope.row.abc" placeholder=""></el-input>
// 正常的浮点数
<el-input v-input-num v-model="scope.row.abc" placeholder=""></el-input>
要是以上不满足条件，都可以在此基础上扩展，不用再去针对单个去判断了，真的好烦。 有错误之处希望大家指出。
