常用vue指令

import Vue from 'vue'
import './directive.dialogdrag.js'

// 去空格
const validform = {

  filterSpace: Vue.directive('filterSpace', {
    update: function (el, {
      value,
      modifiers
    }, vnode) {
      try {
        value = value + ''
        let newval = value.replace(/\s*/g, '')
        if (value !== newval) {
          el.children[0].value = newval
          el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
        }
      } catch (e) {
        console.log(e)
      }
    }
  }),
  // 仅数字
  limitNumber: Vue.directive('limitNumber', {
    update: function (el, {
      value,
      modifiers
    }, vnode) {
      try {
        if (typeof value === 'number') return
        value = value || ''
        let newval = value.replace(/\D/g, '')
        if (value !== newval) {
          el.children[0].value = newval
          el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
        }
      } catch (e) {
        console.log(e)
      }
    }
  }),
  // 仅非负数字
  // 仅最多两位小数
  limitFixedNumber: Vue.directive('limitFixedNumber', {
    update: function (el, {
      value,
      modifiers
    }, vnode) {
      try {
        value = value || ''
        let newval = value == '.' ? '' : typeof (value) == 'string' ? value : value.toString()
        newval = newval.replace(/[^\d.]/g, '') // 清除“数字”和“.”以外的字符
        newval = newval.replace(/\.{2,}/g, '.') // 只保留第一个. 清除多余的
        newval = newval.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')
        newval = newval.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3')// 只能输入两个小数

        if (newval.indexOf('.') < 0 && newval != '') { // 以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
          newval = parseFloat(newval)
        }

        if (value !== newval) {
          el.children[0].value = Number(newval)
          el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
        }
      } catch (e) {
        console.log(e)
      }
    }
  }),
  // 过滤特殊字符
  limitSpecial: Vue.directive('limitSpecial', {
    update: function (el, {
      value,
      modifiers
    }, vnode) {
      try {
        value = value.toString()
        let pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥%《》\"+——=……&*（）&;—|{}【】‘；：”“'。，、？]|[\u4e00-\u9fa5]", 'g')
        let newValue = value.replace(pattern, '')
        if (value !== newValue) {
          el.children[0].value = newValue
          el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
        }
      } catch (e) {
        console.log(e)
      }
    }
  }),
  // 倒计时
  timer: Vue.directive('timer', {
    bind: function (el, binding) {
      console.log(el)
      let t
      el.addEventListener('click', function () {
        if (el.dataset.validate === 'true') return
        let s = binding.arg
          ? binding.arg
          : 60
        const oldText = el.innerText
        el.disabled = true
        // el.innerText = oldText + "（" + s + "S）"
        el.innerText = s + 'S'
        t = setInterval(function (params) {
          if (s === 1) {
            if (binding.value && typeof (binding.value) === 'function') {
              binding.value()
            }
            el.innerText = oldText
            el.disabled = false
            clearInterval(t)
            return
          }
          s--
          // el.innerText = oldText + "（" + s + "S）"
          el.innerText = s + 'S'
        }, 1000)
      })
    }
  })
  

  // 仅手机号
  limitPhone: Vue.directive('limitPhone', {
    update: function (el, {
      value,
      modifiers
    }, vnode) {
      try {
        // let reg_tel = /^1\d{10}$/
        let newval = value ? value.replace(/\D/g, '') : ''
        newval = newval.replace(/[^\d]/g, '') // 清除“数字”和“.”以外的字符

        if (newval.length == 1 && newval != 1) {
          newval = ''
        }
        newval = newval.length > 11 ? newval.slice(0, 11) : newval
        console.log('newval :>> ', newval)
        if (value !== newval) {
          el.children[0].value = newval
          el.children[0].dispatchEvent(new Event(modifiers.lazy ? 'change' : 'input'))
        }
      } catch (e) {
        console.log(e)
      }
    }
  })}

export default validform