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

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

最近在做一个金额查询，验证的时候总是出现很多问题，如输入-号后，input框里是没有了，但是在model里还是绑定了，提交的时候就会报错，真的http://是让人很是郁闷，小数点也是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里就好了

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。