vue 之定义指令关于输入框

只能输入正整数

import Vue from 'vue'
import { Message } from 'element-ui'

Vue.directive('filterNumberInt', {
  bind (el, bindings, vnode) {
    try {
      let flag = true
      el.children[0].addEventListener('compositionstart', () => {
        flag = false
      })
      el.children[0].addEventListener('compositionend', () => {
        flag = true
      })
      el.children[0].addEventListener('input', (e) => {
        setTimeout(() => {
          if (flag) {
            // @ts-ignore
            if (!e.target.value) {
              e.preventDefault()
              return
            }
            const bindingsValueArr = (bindings.value || '').split('.')
            const bindingsValueArrLen = bindingsValueArr.length
            const reg = /^0?\d+(?:\d{0,2})?/
            // const reg = /^(-?[1-9]+[\d]*(.[0-9]{1,2})?)$/
            // eslint-disable-next-line no-useless-escape
            // @ts-ignore
            e.target.value = e.target.value.match(reg)
            if (bindingsValueArrLen === 1) {
              // @ts-ignore
              vnode.context[bindingsValueArr[0]] = e.target.value
            } else if (bindingsValueArrLen === 2) {
              // @ts-ignore
              vnode.context[bindingsValueArr[0]][bindingsValueArr[1]] = e.target.value
            } else if (bindingsValueArrLen === 3) {
              // @ts-ignore
              vnode.context[bindingsValueArr[0]][bindingsValueArr[1]][bindingsValueArr[2]] = e.target.value
            }
            e.preventDefault()
          }
        })
      })
    } catch (e) {
      Message.error(e)
    }
  }
})

不能输入特殊字符

Vue.directive('filterSpecialChar', {
  bind (el, bindings, vnode: any) {
    try {
      let flag = true
      el.children[0].addEventListener('compositionstart', () => {
        flag = false
      })
      el.children[0].addEventListener('compositionend', () => {
        flag = true
      })
      el.children[0].addEventListener('input', (e: any) => {
        setTimeout(() => {
          if (flag) {
            if (!e.target.value) {
              e.preventDefault()
              return
            }
            const bindingsValueArr = (bindings.value || '').split('.')
            const bindingsValueArrLen = bindingsValueArr.length
            const expandReg = {
              default: /[^a-zA-Z0-9\u4E00-\u9FA5]/g,
              onlyNumber: /[^0-9]/g,
              onlyCodeNumber: /[^a-zA-Z0-9]/g,
              onlyCapitalNumber: /[^A-Z0-9]/g,
              more: specialCharRegMore,
              proCode: /[^a-zA-Z0-9_.-]/g,
              proSearch: /[^a-zA-Z0-9\u4E00-\u9FA5_.-]/g,
              serviceCode: /[^a-zA-Z0-9_.-]/g,
              serviceSearch: /[^a-zA-Z0-9\u4E00-\u9FA5_.-]/g,
              menuCode: /[^a-zA-Z0-9-_]/g,
              menuName: /[^a-zA-Z0-9\u4E00-\u9FA5()（）]/g,
              menuSearch: /[^a-zA-Z0-9\u4E00-\u9FA5-_()（）]/g,
              routeId: /[^a-zA-Z0-9-_]/g,
              interUrl: /[^a-zA-Z0-9?:!\&\//=]/g,
              outerUrl: /[^a-zA-Z0-9-_/.:?&]/g
            } as any
            // 参数： 默认空| more| three
            const reg = expandReg[bindings.arg || 'default']
            e.target.value = e.target.value.replace(reg, '')
            if (bindingsValueArrLen === 1) {
              vnode.context[bindingsValueArr[0]] = e.target.value
            } else if (bindingsValueArrLen === 2) {
              vnode.context[bindingsValueArr[0]][bindingsValueArr[1]] = e.target.value
            } else if (bindingsValueArrLen === 3) {
              vnode.context[bindingsValueArr[0]][bindingsValueArr[1]][bindingsValueArr[2]] = e.target.value
            }
            e.preventDefault()
          }
        })
      })
    } catch (e) {
      Message.error(e)
    }
  }
})

保留两位小数点

Vue.directive('filterNumber', {
  bind (el, bindings, vnode) {
    try {
      let flag = true
      el.children[0].addEventListener('compositionstart', () => {
        flag = false
      })
      el.children[0].addEventListener('compositionend', () => {
        flag = true
      })
      el.children[0].addEventListener('input', (e) => {
        setTimeout(() => {
          if (flag) {
            // @ts-ignore
            if (!e.target.value) {
              e.preventDefault()
              return
            }
            const bindingsValueArr = (bindings.value || '').split('.')
            const bindingsValueArrLen = bindingsValueArr.length
            const reg = /^-?\d+(?:.\d{0,2})?/
            // @ts-ignore
            if (e.target.value !== '-') {
              // @ts-ignore
              e.target.value = e.target.value.match(reg)
            }
            if (bindingsValueArrLen === 1) {
              // @ts-ignore
              vnode.context[bindingsValueArr[0]] = e.target.value
            } else if (bindingsValueArrLen === 2) {
              // @ts-ignore
              vnode.context[bindingsValueArr[0]][bindingsValueArr[1]] = e.target.value
            } else if (bindingsValueArrLen === 3) {
              // @ts-ignore
              vnode.context[bindingsValueArr[0]][bindingsValueArr[1]][bindingsValueArr[2]] = e.target.value
            }
            e.preventDefault()
          }
        })
      })
    } catch (e) {
      Message.error(e)
    }
  }
})