crs-double-resistance/src/js/directive.js

import Vue from 'vue'


/**
 * 限制输入数字指令
 * 自定义修饰符，
 * nozero：不可输入0，
 * integer：只可输入整数，
 * positive：只可输入正数，
 * negative：只可输入负数，
 * 指令值是个对象，{
 *  keyStr: 绑定的值，必传
 *  point: 限制输入小数位数，非必传，默认不限
 * }
 * e.g：<input v-model="ruleform.input" v-number.integer.positive="{keyStr: 'ruleform.input', point: 3}" />
 */
Vue.directive('number', {
  bind (el, binding, vnode, oldVnode) {
    el.__numberHandler__ = function () {
      function getOrSetValue (keyStr, obj, value, type) {
        var arrKey = keyStr.split('.')
        var temp = obj
        for (let i = 0; i < arrKey.length; i++) {
          if (arrKey[i].indexOf('[') > -1 && arrKey[i].indexOf(']') > -1) {
            // 复杂结构，e.g，ruleform[1]
            var str = arrKey[i].replace(/\[|\]/gim, '-|-').split('-|-')
            if (i === arrKey.length - 1) {
              if (type === 'set') {
                temp[str[0]][str[1]] = value
              } else if (type === 'get') {
                return temp[str[0]][str[1]]
              }
            } else {
              temp = temp[str[0]][str[1]]
            }
          } else {
            if (i === arrKey.length - 1) {
              if (type === 'set') {
                temp[arrKey[i]] = value
              } else if (type === 'get') {
                return temp[arrKey[i]]
              }
            } else {
              temp = temp[arrKey[i]]
            }
          }
        }
      }
      // 输入值
      var strValue = getOrSetValue(binding.value.keyStr, vnode.context, null, 'get')
      // 防止值不是字符串，无法使用replace方法
      if (strValue === null || strValue === undefined) {
        strValue = ''
      } else {
        strValue = strValue + ''
      }
      // 清除数字，'.'，'-'以外的字符
      strValue = strValue.replace(/[^\d.-]/g, '')
      // 不可输入0
      if (binding.modifiers.nozero) strValue = strValue.replace(/^0/g, '')
      // 限制输入整数
      if (binding.modifiers.integer) strValue = strValue.replace(/\./g, '')
      // 限制输入正数
      if (binding.modifiers.positive && binding.modifiers.negative) {
        // 限制输入，正数，负数，则相当于未设置，都可输入
      } else if (binding.modifiers.positive) {
        // 限制输入正数
        strValue = strValue.replace(/-/g, '')
      } else if (binding.modifiers.negative) {
        // 限制输入负数
        strValue = strValue ? '-' + strValue.replace(/-/g, '') : ''
      }
      // 0开头，去除开头连续的0
      strValue = strValue.replace(/^00/g, '0')
      // 0开头，后面是数字，则去除开头0
      strValue = strValue.replace(/^0([1-9])/g, '$1')
      // 只保留第一个'.'
      strValue = strValue.replace(/(\..*)\./g, '$1')
      // 第一个字符如果是.号，则补充前缀0
      strValue = strValue.replace(/^\./g, '0.')
      // '-'只能是第一个，其他情况去除
      strValue = strValue.replace(/(.+)-/g, '$1')
      // 第一个字符如果是-.号，则补充前缀0
      strValue = strValue.replace(/^-\./g, '-0.')
      // 限制输入小数位数
      if (binding.value.point && binding.value.point > 0) {
        strValue = strValue.replace(new RegExp('^(.*\\..{0,' + binding.value.point + '}).*$', 'g'), '$1')
      }
      // 转为数字
      if (strValue !== '' && strValue !== '-' && strValue !== '-0' && strValue.slice(-1) !== '.') {
        strValue = strValue * 1
      }
      // 更新值
      getOrSetValue(binding.value.keyStr, vnode.context, strValue, 'set')
    }
    el.addEventListener('keyup', el.__numberHandler__)
  },
  unbind (el, binding, vnode, oldVnode) {
    el.removeEventListener('keyup', el.__numberHandler__)
  }
})