通过指令实现输入框只能输入数字

指令：v-onlyNumber

/**
 * 限制input输入框只能输入纯数字
 * 支持负数
 */
export default ({}.install = (Vue, options = {}) => {
  Vue.directive('onlyNumber', {
    bind(el, binding, vnode) {
      let input_ele
      const el_tagName = el.tagName.toUpperCase()
      if (el_tagName === 'INPUT') {
        input_ele = el
      } else {
        input_ele = el.getElementsByTagName('input')[0]
      }
      if (!input_ele) {
        return
      }

      input_ele.addEventListener('input', () => {
        var reg, res
        var val = input_ele.value
        if (binding.modifiers.positive && !binding.modifiers.float) {
          // 正整数.positive
          reg = /\D/g
          res = val.replace(reg, '')
        }
        if (!binding.modifiers.positive && !binding.modifiers.float) {
          // 默认正负整数
          reg = /\D/g
          res = val.replace(reg, '')
          if (val[0] === '-') {
            res = '-' + res
          }
        }
        input_ele.value = res
      })
    }
  })
})

在main.js中引入使用

import directives from './directive'

// register directives
directives.forEach(key => {
  Vue.use(key)
})

目录结构：