近來在做一個金額查詢,考證的時刻老是湧現許多題目,如輸入-號后,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里就好了,不過這個要領只能用在ivew中,日常平凡我們經常會碰到該範例得題目。
我在後來用element-ui時輸入框得考證中,這個要領是不能用的
該文章客歲宣布,一向更新不上不去,能夠文章筆墨太少得原因吧