• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

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的值改了,但是你绑定的源数据还是原来你输入的值。

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

0
  • 本文分类:vue 项目实战
  • 本文标签:vueelement数字input小数
  • 流行热度:已超过 91 人围观了本文
  • 最后更新:2021年01月4日 - 14时50分20秒
  • 发布日期:2021年01月4日 - 14时28分00秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码