背景：开发中我们经常会有一些金额的字段，常常需要控制用户只能输入整数，或者只能输入整数+两位小数的处理，而且如果是输入小数的话要控制只能输入一个点（.）
自定义指令v-only-number
onlyNumber.js
export default {
inserted (el, vDir, vNode) {
// vDir.value 有指令的参数
let content
// 设置输入框的值,触发input事件,改变v-model绑定的值
const setVal = val => {
if (vNode.componentInstance) {
// 如果是自定义组件就触发自定义组件的input事件
vNode.componentInstance.$emit('input', val)
} else {
// 如果是原生组件就触发原生组件的input事件
el.value = val
el.dispatchEvent(new Event('input'))
}
}
// 按键按下=>只允许输入 数字/小数点/减号
el.addEventListener('keypress', event => {
const e = event || window.event
const inputKey = String.fromCharCode(typeof e.charCode === 'number' ? e.charCode : e.keyCode)
const re = /\d|\.|-/
content = e.target.value
// 定义方法,阻止输入
function preventInput () {
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
}
if (!re.test(inputKey) && !e.ctrlKey) {
preventInput()
} else if (content.indexOf('.') > 0 && inputKey === '.') {
// 已有小数点,再次输入小数点
preventInput()
}
})
// 按键弹起=>并限制最大最小
el.addEventListener('keyup', event => {
const e = event || window.event
content = parseFloat(e.target.value)
if (!content) {
content = 0
}
let argMax = ''
let argMin = ''
if (vDir.value) {
argMax = parseFloat(vDir.value.max)
argMin = parseFloat(vDir.value.min)
}
if (argMax !== undefined && content > argMax) {
setVal(argMax)
content = argMax
}
if (argMin !== undefined && content < argMin) {
setVal(argMin)
content = argMin
}
})
// 失去焦点=>保留指定位小数
el.addEventListener('focusout', event => { // 此处会在 el-input 的 @change 后执行
const e = event || window.event
content = parseFloat(e.target.value)
if (!content) {
content = 0;
}
let argPrecision = 0// 默认保留至整数
if (vDir.value.precision) {
argPrecision = parseFloat(vDir.value.precision)
}
const reg = RegExp(`(?<=\\.\\d{${argPrecision}}).*$`)
content = String(content).replace(reg, '')
setVal(content)
// -- callback写法1
// vNode.data.model.callback = ()=>{
// e.target.value = content.toFixed(argPrecision)
// }
// vNode.data.model.callback();
// -- callback 写法2
// vNode.data.model.callback(
// e.target.value = content.toFixed(argPrecision)
// )
})
}
}
// 这里保留小数的方法我是直接舍弃不要的小数位，如果需要四舍五入保留相应的小数位，可以自行更改这段代码逻辑
if (vDir.value.precision) { argPrecision = parseFloat(vDir.value.precision) }
ps：如果是使用原生js的toFixed四舍五入的方法会有一些精度的问题，具体问题看我另外一篇文章专门讲toFixed遇到的问题：https://juejin.cn/post/7312404578959540262
注册自定义指令v-only-number
index.js
import onlyNumber from './onlyNumber'
const install = Vue => {
Vue.directive('onlyNumber', onlyNumber)
}
/*
Vue.use( plugin )
安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。
如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。
该方法需要在调用 new Vue() 之前被调用。
当 install 方法被同一个插件多次调用，插件将只会被安装一次。
*/
if (window.Vue) {
window['onlyNumber'] = onlyNumber
Vue.use(install); // eslint-disable-line
}
onlyNumber.install = install
export default onlyNumber
用法
/**
* 用法
* 绑定v-only-number="{ min: 0, max: 99999999, precision: 2 }"
*/
<el-input
v-model="form.registeredCapital"
v-else
v-only-number="{
min: -99999999,
max: 99999999,
precision: 2,
}"
>
<span slot="suffix">元</span>
</el-input>
min:控制最小值
max：控制最大值
precision：控制小数位数（保留几位小数）
