vue项目中如何实现设置输入输入框只能输入正数

vue项目中如何实现设置输入输入框只能输入正数?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强>在某些项目中输入框只能输入数字,可以用以下办法:

先在标签上绑定上@input事件来监听标签的值变化,通过正则来改变输入的值。

 & lt;输入
　　类=発eep_input"
　　v-number-only
　　
　　v模型=皊cope.row.fileOrder"
　　@input=皊cope.row。fileOrder=(event.target.value美元数量。替换(\ D +/& # 39; & # 39;))“;/在

第二部封装个自定义指令放在标签上!

指令:{
　　的头号:{
　　绑定:函数(el) {
　　埃尔。处理程序=function () {
　　埃尔。值=https://www.yisu.com/zixun/Number (el.value.replace (/D +/"))
　　}
　　埃尔。addEventListener(“输入”,el.handler)
　　},
　　解开:函数(el) {
　　埃尔。removeEventListener(“输入”,el.handler)
　　}
　　}
　　},

接下来就可以去页面看效果了,只能输入数字且只是正数!

附上元素的输入样式代码

 .keep_input {
　　-webkit-appearance:没有;
　　background - color: # fff;
　　背景图片:没有;
　　border - radius: 4 px;
　　边界:1 px固体# dcdfe6;
　　-webkit-box-sizing: border-box;
　　box-sizing: border-box;
　　颜色:# 606266;
　　显示:inline-block;
　　字体大小:继承;
　　大纲:0;
　　填充:15 0 px;
　　-webkit-transition:边框颜色0.2年代cubic-bezier (0.645, 0.045, 0.355, 1);
　　过渡:边框颜色0.2年代cubic-bezier (0.645, 0.045, 0.355, 1);
　　高度:30 px;
　　行高:30 px;
　　text-align:左;
　　}
　　.keep_input:专注{
　　边框颜色:# 54 a6de;
　　大纲:0;
　　}

<强>记录el-input type=数量限制长度el-input使用

如下所示: