v-limit-input
v0.0.32
Published
针对数字处理的vue指令包
Downloads
1
Readme
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
| 参数 | 类型 | 默认值 | 可选值 | 描述 | |-----------|-------------|--------|--------------|---------------------------------------------------------------------------------------------------------| | unit | String/null | + | - ,null, + | 表示是正整数还是负整数, 默认是正数, 可以支持负数, 或者null, 表示正数负数都可以 | | decimal | int | 2 | | 小数点位数, 参数为正整数 | | length | int | 无 | | 总长度, 默认不限定, 参数为正整数 | | toDecimal | boolean | false | | 默认是处理完以后, 值是字符串,设置为 ttue. 转换为数字类型 | | arg | int | 无 | | arg 指令的参数, 实质就是和length 是一样的 v-limit-text-float:5 等价于 v-limit-text-float="{length: 5}" |
注意事项
- 对于 input等文本域, 原生属性 maxlength='' , 如果同时设置 原生属性以及传递参数, 则会以原生属性为准
demo
-0.22
-0.00
-1
2