有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

v-model.number小数(vue限制文本框输入数字的正确姿势)

vue 炮渣日记 3周前 (11-19) 86次浏览 已收录 0个评论 扫描二维码

最近遇到一个需求,需要限制文本框输入数字,而number类型的输入框有箭头,个人不是很喜欢,因此想要寻求其它途径实现。本想通过网上找个现成的插件,然而百度,谷歌一番都没有找到满意的答案,至于随手一搜出来的方案或多或少都有点缺陷。因此自己动手,丰衣足食。

事件选型

首先我们很容易想到通过事件来达到目的,大致可以通过以下几个事件来实现:

  • keypress/keydown
  • 思路:按键按下的时候触发,通过判断按下的是否是数字返回true/false来限制用户的输入。
  • 缺点:无法限制用户复制粘贴的数据。
  • keyup
  • 思路:同keypress事件,区别在于按键摁下弹起的时候触发。
  • 缺点:从界面上看有个回退(显示用户输入的 不合法字符之后删除回退)的现象,不是很自然。
  • input
  • 思路:用户输入的时候触发
  • 优点:可以在用户复制粘贴的时候获取到完整的值,同时不会有界面回退的现象。

初步实现

综合各种方案的优缺点,选定input事件来实现,首先我们来实现最简单的限制用户只能输入正整数。代码如下:

<el-input v-model=”model” oninput=”value=value.replace(/[^\d]/g, ”)” />

但是,此方法有的时候没有很好地达到预期效果,这边我放到最后再来讲。

封装成指令

通过自定义指令来增加相应DOM的特性,使其支持文本输入限制。

function onInput(el, ele, binding, vnode) {

function handle() {

// 只保留数字

ele.value = ele.value.replace(/[^\d]/g, ”)

}

return handle

}

const numberInput= {

bind(el, binding, vnode) {

const ele = el.tagName === ‘INPUT’ ? el : el.querySelector(‘input’)

ele.addEventListener(‘input’, onInput(el, ele, binding, vnode), false)

},

}

Vue.directive(‘number-input’, numberInput)

使用方法:

<el-input v-model="model" v-number-input />

支持浮点数

我们知道v-model指令有三种修饰符lazy, number, trim实现了不同的功能,这边呢,也想通过v-number-input.float的方式达到支持浮点数的目的 。

修改handle回调,增加浮点数的支持

function handle() {

+ let val = ele.value

+ // modifiers为修饰符对象,传入了float,则其float属性为true

+ if (binding.modifiers.float) {

+ // 清除”数字”和”.”以外的字符

+ val = val.replace(/[^\d.]/g, ”)

+ // 只保留第一个, 清除多余的

+ val = val.replace(/\.{2,}/g, ‘.’)

+ // 第一个字符如果是.号,则补充前缀0

+ val = val.replace(/^\./g, ‘0.’)

+ } else {

val = ele.value.replace(/[^\d]/g, ”)

}

ele.value = val

}

使用方法:

<el-input v-model="model" v-number-input.float />

支持小数保留位最大位数限制

查阅官方文档可知,指令支持参数的传递,这边我们期望通过参数传递小数点保留位数的配置

function handle() {

let val = ele.value

// modifiers为修饰符对象,传入了float,则其float属性为true

if (binding.modifiers.float) {

// 清除”数字”和”.”以外的字符

val = val.replace(/[^\d.]/g, ”)

// 只保留第一个, 清除多余的

val = val.replace(/\.{2,}/g, ‘.’)

// 第一个字符如果是.号,则补充前缀0

val = val.replace(/^\./g, ‘0.’)

+ if (typeof binding.value !== ‘undefined’) {

+ // 期望保留的最大小数位数

+ let pointKeep = 0

+ if (typeof binding.value === ‘string’

+ || typeof binding.value === ‘number’) {

+ pointKeep = parseInt(binding.value)

+ }

+ if (!isNaN(pointKeep)) {

+ if (!Number.isInteger(pointKeep)

+ || pointKeep < 0) {

+ pointKeep = 0

+ }

+ const str=’^(\\d+)\\.(\\d\{‘ + pointKeep + ‘}).*$’

+ const reg=new RegExp(str)

+ if (pointKeep === 0) {

+ // 不需要小数点

+ val = val.replace(reg, ‘$1’)

+ } else {

+ // 通过正则保留小数点后指定的位数

+ val = val.replace(reg, ‘$1.$2’)

+ }

+ }

} else {

val = ele.value.replace(/[^\d]/g, ”)

}

ele.value = val

}

使用方法:

// 最多支持保留2位小数
<el-input v-model="model" v-number-input.float="2" />

支持负数

对正则稍加修改,只保留开头的负号,使其支持负数

function handle() {

let val = ele.value

// modifiers为修饰符对象,传入了float,则其float属性为true

if (binding.modifiers.float) {

// 清除”数字”和”.”以及”-“以外的字符

+ val = val.replace(/[^\-\d.]/g, ”)

// 只保留第一个’-‘号

+ val = val.replace(/\.{2,}/g, ‘.’).replace(/\-{2,}/g, ‘-‘)

// 将 ‘-.’ 替换成 ‘-0.’

+ val = val.replace(/^\./g, ‘0.’).replace(/^\-\./, ‘-0.’)

if (typeof binding.value !== ‘undefined’) {

// 期望保留的最大小数位数

let pointKeep = 0

if (typeof binding.value === ‘string’

|| typeof binding.value === ‘number’) {

pointKeep = parseInt(binding.value)

}

if (!isNaN(pointKeep)) {

if (!Number.isInteger(pointKeep)

|| pointKeep < 0) {

pointKeep = 0

}

// 增加’-‘号的支持

+ const str=’^(\\-)*(\\d+)\\.(\\d\{‘ + pointKeep + ‘}).*$’

const reg=new RegExp(str)

if (pointKeep === 0) {

// 不需要小数点

+ val = val.replace(reg, ‘$1$2’)

} else {

// 通过正则保留小数点后指定的位数

+ val = val.replace(reg, ‘$1$2.$3’)

}

}

} else {

val = ele.value.replace(/[^\d]/g, ”)

}

ele.value = val

}

支持输入的最大值和最小值的限制

指令的参数支持对象的传递,因此这边我们通过对象的字段配置最大数和最小值的配置。定义如下:

{

min: {type: number},

max: {type: number},

// 最大小数位,仅在float下有效

decimal: {type: number}

}

function handle() {

let val = ele.value

// modifiers为修饰符对象,传入了float,则其float属性为true

if (binding.modifiers.float) {

// 清除”数字”和”.”以及”-“以外的字符

val = val.replace(/[^\-\d.]/g, ”)

// 只保留第一个’-‘号

val = val.replace(/\.{2,}/g, ‘.’).replace(/\-{2,}/g, ‘-‘)

// 将 ‘-.’ 替换成 ‘-0.’

val = val.replace(/^\./g, ‘0.’).replace(/^\-\./, ‘-0.’)

if (typeof binding.value !== ‘undefined’) {

// 期望保留的最大小数位数

let pointKeep = 0

if (typeof binding.value === ‘string’

|| typeof binding.value === ‘number’) {

pointKeep = parseInt(binding.value)

+ } else if (typeof binding.value === ‘object’) {

+ // 支持新的小数点保留位配置

+ pointKeep = binding.value.decimal

}

if (!isNaN(pointKeep)) {

if (!Number.isInteger(pointKeep)

|| pointKeep < 0) {

pointKeep = 0

}

// 增加’-‘号的支持

const str=’^(\\-)*(\\d+)\\.(\\d\{‘ + pointKeep + ‘}).*$’

const reg=new RegExp(str)

if (pointKeep === 0) {

// 不需要小数点

val = val.replace(reg, ‘$1$2’)

} else {

// 通过正则保留小数点后指定的位数

val = val.replace(reg, ‘$1$2.$3’)

}

}

} else {

val = ele.value.replace(/[^\d]/g, ”)

}

+ if (val !== ” && typeof binding.value === ‘object’) {

+ let { min, max } = binding.value

+ min = parseFloat(min)

+ max = parseFloat(max)

+ if (!isNaN(min)) {

+ if (min >= 0) {

+ // 不能是负数

+ val = val.replace(‘-‘, ”)

+ }

+ if (parseFloat(val) < min) {

+ val = min

+ }

+ }

+ if (!isNaN(max)) {

+ if (parseFloat(val) > max) {

+ val = max

+ }

+ }

+ }

ele.value = val

}

使用方法:

// 最小为0
<el-input v-model="model" v-number-input="{ min: 0 }" />

结语

至此我们的功能已经实现得差不多了,上述代码已经足以应对我们的大多数的需求了。但在我发现某些场景下有的时候键入非数字时,表单验证获取的数值仍然是我键入的字符而非空值,导致非空验证不正确。但是这种情况并非必现的,我猜想可能是因为是vue的model数据未同步导致的,因此在上述回调函数添加上以下代码,手动触发数据的双向绑定。

if (vnode.componentInstance) {
 vnode.componentInstance.$emit('input', ele.value)
} else {
 vnode.elm.dispatchEvent(new CustomEvent('input', ele.value))
}
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址