【directives】自定义指令之input数值

需求

由于input输入框的number类型不调好用,故通过自定义指令给element el-input组件设置输入限制

功能

1.可设置允许输入的最大最小值
2.可设置精度
3.限制非数值输入

输入限制

1.小数点"."不允许出现在第一位,且只允许输入一次
2.负号"-"仅可以出现在第一位,且配置最小值允许出现负值时可用
3.限制输入法的输入事件

未实现功能TODO/(ㄒoㄒ)/~~

精度拦截目前在输入时未做拦截
原因:在输入框输入达到精度限制时,此时按ctrl+a想要执行覆盖选中重新输入操作时,输入事件会判断达到输入精度做大值,无法执行上述操作
替换方案:在输入框失去焦点时做精度格式化

有解决方案的小伙伴欢迎解答 T_T

demo如下

提供三个参数
{min: -100, max: 100, precision: 2},
1.min最小值:默认-100
2.max最小值:默认100
3.precision精度(保留小位数):默认2

'懒人'提醒

可根据需求修改默认值,或设置为null不做限制
只需将demo中对应的监听事件里 声明的 _min 和 _max 和 _precision 改为想要的默认值即可

//keypress下
let _precision = 2;
let _max = 100;
let _min = -100;
//keyup下
let _precision = 2;
let _max = 100;
let _min = -100;
//focusout
let _precision = 2;


你可能感兴趣的:(【directives】自定义指令之input数值)