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…