Vue自定义指令实现input限制输入正整数

前言

种一棵树最好的时间是十年前，其次是现在。--谁说的不重要。

明确需求

在做表单时，我们经常会遇到各种input输入框，例如在设计填写个数时，要求输入正整数。

普通实现

如果只是个别输入框，那么我们完全可以检测input的keyup事件，在该事件里对keyup事件进行操作即可

    <input type="text" v-model="value" 
    @keyup="value = value.length === 1 ? value.replace(/[^1-9]/g, '') : value.replace(/\D/g, '')" />
复制代码

如果存在大量的要求输入正整数，那就不好玩了

高级实现

最终效果

粉墨登场！

首先看下最终结果：

<input type="text" v-model="value" v-Int/>
复制代码

确认过的眼神，简单到只需要添加指令 v-Int即可实现，是不是心动的感觉？

实现方式

1. 新建JS文件，代码如下

2. 注册自定义指令，在main.js文件中引入文件，并注册（图中标注两行代码即可）

3. 起飞，在需要的地方输入框使用该指令即可轻松实现。

结语

如果把自己常用的小技能都采用自定义的方式进行维护，那岂不是美滋滋。

修正

用了一段时间后，发现一个，input的值被修改了，但vue里显示的还是旧值（例如输入字母时失去焦点，值竟然没有发生改变），这是个严重的bug呀...于是花了一上午找原因...找到解决方法：

import Vue from 'vue'
export default () => {
  // 针对 el-input做的限制，只能输入正整数
  Vue.directive('Int', {
    bind: function (el) {
      const input = el.getElementsByTagName('input')[0]
      input.onkeyup = function (e) {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
      input.onblur = function (e) {
        if (input.value.length === 1) {
          input.value = input.value.replace(/[^1-9]/g, '')
        } else {
          input.value = input.value.replace(/[^\d]/g, '')
        }
        trigger(input, 'input')
      }
    }

  })
}
/*********************************
  ** Fn: trigger
  ** Intro: 参考 https://github.com/vuejs/Discussion/issues/157#issuecomment-273301588
  ** Author: zyx
*********************************/
const trigger = (el, type) => {
  const e = document.createEvent('HTMLEvents')
  e.initEvent(type, true, true)
  el.dispatchEvent(e)
}

复制代码

到这里bug已经修复了。 该bug解决方法参考自：github.com/vuejs/Discu…