木灵鱼儿

木灵鱼儿

阅读：855

最后更新：2021/01/04/ 14:50:20

el-input 只能输入数字和小数

饿了么的input组件只是在v-modal绑定的时候有一个.number修饰符，使用这个修饰符确实可以只输入数字，但是输入的是整数，无法输入小数，而且字符串还是可以输入，还可以负数，很尴尬。

如果只想让它输入数字，小数，甚至更复杂的判断，上面的方式是不行的。

网上的处理方式

<el-input-number v-model="num" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>

大概就是给他添加一个老版本的事件，行内事件进行replace替换，这种方式可行，但是如果方法里面的代码过多，就很尴尬。

我的方式

<el-input-number v-model="num" @input.native ="onNumber($event)"></el-input>

我是给他绑定一个vue的书写事件，如果你需要event对象，就必须使用native修饰符，如果不需要，可以不写。

参数

vue的数据是双向绑定的，所以，最好的方式就是能够直接去修改绑定的数据，而不是去修改input的value值，但是不管是string还是number，他们都不是引用类型，所以几遍你传入了绑定的值，那也只是值，你修改这个值，并不能改到源数据。

所以我的想法是，将源数据设为一个对象{}，一般来说，form表单绑定的值都是某一个对象下面的值，所以我们直接把这对象作为参数传给他，并且把这个input绑定的对应的键值的key名也作为参数传入

<template>
  <el-input-number v-model="form.number" @input="onNumber(form,'numbner')"></el-input> 
</template>
<script>
  export default {
    data(){
      return {
        form:{
          number:""
        }
      }
    },
    methods: {
      onNumber(row, prop){
        let value = row[prop].replace(/[^\d.]/g, "");
        if (Number(value) > 10) {
          value = 10;
        }
        row[prop] = value;
      }
    }
  }
</script>

这样写，一个比较完美的判断就有了，我们修改的是源数据，数据不用管input的显示，因为他双向绑定了，只有源变了，他也就变了。

我知道可能会有人这样想

<template>
  <el-input-number v-model="form.number" @input.native="onNumber($event)"></el-input> 
</template>
<script>
  export default {
    data(){
      return {
        form:{
          number:""
        }
      }
    },
    methods: {
      onNumber(event){
        let value = event.target.value.replace(/[^\d.]/g, "");
        if (Number(value) > 10) {
          value = 10;
        }
        event.target.value = value;
      }
    }
  }
</script>

为什么不只用event对象去修改呢，使用这种方式，虽然input的value值变了，但是他并没触发双向绑定，也就是说，input的值改了，但是你绑定的源数据还是原来你输入的值。

所以，最佳实践，还是我那种方式，修改源数据。

文章分类 vue 项目实战
文章标签 vueelement数字input小数
木灵鱼儿

木灵鱼儿

发布了 585 篇文章获得点赞 0获得阅读 855

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可，禁止转载。

one
two
three

关于作者

站点职位 博主
获得点赞 0
文章被阅读 855

相关文章

transform 知识补充transform 知识补充
grid布局grid布局
meta name= viewport 知识补充meta name= viewport 知识补充
flex布局知识补充flex布局知识补充
vue cli3-cli4 打包后项目在二级路径的方法vue cli3-cli4 打包后项目在二级路径的方法