vue指令只能输入正数并且只能输入一个小数点的方法


            最近在做一个金额查询，验证的时候总是出现很多问题，如输入-号后，input框里是没有了，但是在model里还是绑定了，提交的时候就会报错，真的是让人很是郁闷，小数点也是input框过滤掉了，但是提交的时候也会出现。不过经过努力终于找到了一种解决方案，在这里``和大家分享一下下。





Vue.directive('numbers', {

 bind: function (el, binding) {

  console.log('ere')

 },

 inserted: function (el) {

  // el.querySelector('input').blur(console.log('etset'))

 },

 update: function (el, binding, vnode, oldVnode) {

  console.log('vnode', vnode)

  let express = vnode.data.directives[1].expression

  // let value = el.querySelector('input').value

  let value = vnode.data.directives[1].value

  if (typeof value === 'string') {} //在重置的时候清空

  if (value.split('.').length - 1 > 1) {

   value = value.replace(/\.{2,}/g, '') // 只保留第一个. 清除多余的

   value = value.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.')

  }

  let repeatValue = value.replace(/[^\d.]/g, '')

  // setTimeout(() => {

  //  el.querySelector('input').value = repeatValue

  // }, 5)

  setValueWithExpressionVue(vnode.context.$data, express, repeatValue)

 },

 componentUpdated: function () {},

 unbind: function (el) {}

})



// 

function setValueWithExpressionVue (currObj, expression, value) {

 expression = expression.split('.')

 expression.forEach(function (arg, i) {

  if (i < expression.length - 1) {

   currObj = currObj[arg]

  } else {

   currObj[arg] = value

  }

 })

}







放到main.js里就好了



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中文源码网。