vue 移动端的input 数字输入优化

这是移动端使用的,
input type 为number 时 英文或中文都没有限制,而且maxlength不起作用,
input type 为tel 时 英文或中文也都没有限制,但maxlength有作用,所以用tel,
keyup 是为了过滤数字以外的字符。
请问大神这段代码还有没有优化的空间?

<input v-model="phoneNumber" placeholder="输入手机号" type="tel" maxlength="11" @keyup="handleFilterLetters">

<script type="text/javascript">
    vm = new Vue({
            el: "#app",
            data: {
                phoneNumber: null,
            },
            methods: {
                handleFilterLetters: function(){
                    var self = this;
                    self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');
                },
            }
        })
</script>

回答:

  1. phoneNumber 初始值应该是字符串的 '',否则对一个可能为 null 的变量调用 replace 是不安全的。

  2. var self = this 是不必要的。

  3. handleFilterLetters 好长啊,改成 onKeyUp 不好读一点吗(

  4. <input> 一行写的太长了,eslint-airbnb 的规则是

<input
  v-model="phoneNumber"
  placeholder="输入手机号"
  type="tel"
  maxlength="11"
  @keyup="handleFilterLetters"
/>

回答:

楼上说的都对
题主还可以多注意一下 code style
比如:
self.phoneNumber=self.phoneNumber.replace(/[^\d]/g,'');

写成
self.phoneNumber = self.phoneNumber.replace(/[^\d]/g,'');

比较好

回答:

这里用的局部filter

如果想可复用程度高点,全局filter也可以的

<div id="app" >
  <input :value="phone | num"  @keyup="phoneChange" />
</div>
var app = new Vue({
  el: "#app",
  data: { phone: "" },

  methods: {
    phoneChange(e) {
      this.phone = e.target.value
      this.$forceUpdate()  // 这里必须有
    }
  },

  filters: {
    'num': function(value) {
      return value.replace(/[^\d]/g, '')
    }
  }
})

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注