Vue 限制输入正整数（使用自定义命令directive）

自定义JS limitPositiveInt.js

import Vue from 'vue'

// 针对 el-input做的限制，只能输入正整数
const limitPositiveInt = Vue.directive('limitPositiveInt', {
  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')
    }
  }
})
export {limitPositiveInt}

/*********************************
 ** 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)
}

在main.js中引用

import limitPositiveInt from '@/utils/limitPositiveInt.js'

在任意VUE文件中使用

<el-input v-model="formDetail.client_version" v-limitPositiveInt></el-input>

done