最近在做一個金額查詢,驗證的時候總是出現(xiàn)很多問題,如輸入-號后,input框里是沒有了,但是在model里還是綁定了,提交的時候就會報錯,真的是讓人很是郁悶,小數(shù)點也是input框過濾掉了,但是提交的時候也會出現(xiàn)。不過經(jīng)過努力終于找到了一種解決方案,在這里``和大家分享一下下。

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
}
})
}
當(dāng)前標(biāo)題:vue指令只能輸入正數(shù)并且只能輸入一個小數(shù)點的方法-創(chuàng)新互聯(lián)
標(biāo)題URL:http://chinadenli.net/article20/cecpco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、標(biāo)簽優(yōu)化、關(guān)鍵詞優(yōu)化、網(wǎng)站營銷、服務(wù)器托管、網(wǎng)頁設(shè)計公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)