浅谈vue限制文本框输入数字的正确姿势

+ } 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)								 
 2/4   首页 上一页 1 2 3 4 下一页 尾页