v-limit-input v0.0.32

v-limitNumber

以下是会面临的一些场景化的思考, 所以在做指令功能健全以及测试, 还有易用性上, 会存在取舍

功能 > 易用性 > 测试

• 有1个修饰符, 就是整数 , 可以是正整数, 可以是负整数, 可以是0
• 有2个修饰符, 就是带小数的
• 3个修饰符, 就是标志正数还是负数
• 参数为数字, 值为正则, 就是显示 位数, 规则替换为正则
• 没有参数, 没有修饰符, 没有表达式值, 就什么都不做

// 参数int 限制5位整数
v-limitNumber:5.+

// 3位整数, 2位小数
v-limitNumber.+.3.2

// 正则 - 自定义强, 限制位数 10位
v-limit-text:10="/\D/g"

feature

v-limit-text-int:5

限制输入的内容为正整数 , 后面的参数可选, 如果传递,则只能输入对应的maxlenth 长度

注意事项

同时， 对于 input等文本域， 原生属性 maxlength='' ， 如果同时设置 原生属性以及传递参数， 则会以原生属性为准

<input v-limit-text-int:5  maxlength='10'/>

<el-input v-limit-text-int:5  maxlength='10'/>

则 限制长度为 10

注意事项：

如果使用element-ui 的 el-input @input事件，同时也对 value做了二次数据处理， 会存在一个问题， 请使用 native修饰符

<el-input v-limit-text-int:5 @input.native='handleCurrentVal($event)' />

使用 natiev修饰符，则 $event是原生的 event 对象， 不使用 native修饰符， 则handleCurrentVal 默认的第一个参数直接是 value

export default {
  methods: {
    handleCurrentVal(event) {
      console.log('value -->', event.target.value)
    }
  }
}

v-limit-text-float:5 =

限制输入浮点数

简单用法

限定总长度为10位的浮点数

<input
  v-model='testValue'
  v-limit-text-float:10
/>

完整配置用法

<input
  v-model='testValue'
  v-limit-text-float='{unit: "-", decimal: 2, length: 10, fill: false}'
/>

限制输入，总长度为10位的「负」浮点数， 且保留2位小数点, 且不主动补0

<input
  v-model='testValue'
  v-limit-text-float='{ decimal: 4, length: 8, fill: true}'
/>

限制输入，总长度为8为浮点数，且自动补0， 则意味着，整数最多输入 8-1-4=3 位，小数输入4位，小数点1位

fill 为false

1234.  // 会形成  1234
1234.1 // 会形成  1234.1

fill为true

1234.  // 会形成  1234.00
1234.1 // 会形成  1234.10

注意事项

• 对于 input等文本域， 原生属性 maxlength='' ， 如果同时设置 原生属性以及传递参数， 则会以原生属性为准

demo

-0.22
-0.00
-1
2