问题:vue项目中如果想让一个input只能输入正整数,那么需要写一个键盘监听事件对这个input处理,但是如果有很多input需要这样处理,又或者想封装一下,怎样实现比较方便又实用?
解决办法:方便以后的使用,就需要封装一个自定义指定来的方便,就像v-if类似,实用自定就可以实现
步骤:1
1、创建drectives.js
代码:注册v-Int 自定义指令
import Vue from 'vue'
export default () => {
Vue.directive('Int', {
inserted: function (el) {
el.addEventListener('keypress', function (e) {
e = e || window.event
let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
let re = /\d/
if (el.value.length === 0 && charcode === 48) {
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
} else {
if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
}
}
})
}
})
}
2、main.js引入
import drectives from '@/utils/drectives'
Vue.use(drectives)
3、使用 v-Int
<input type="tel" v-model="money" placeholder="请输入提现金额" @input="inputHandler" v-Int>
4、会出现中文输入的问题,下面是解决办法及其全部代码
import Vue from 'vue'
export default () => {
Vue.directive('Int', {
inserted: function (input) {
input.addEventListener('keypress', function (e) {
let charcode = typeof e.charCode === 'number' ? e.charCode : e.keyCode
let re = /\d/
if (input.value.length === 0 && charcode === 48) {
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
} else {
if (!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey) {
if (e.preventDefault) {
e.preventDefault()
} else {
e.returnValue = false
}
}
}
})
input.onblur = function (e) {
if (input.value.length === 1) {
input.value = input.value.replace(/[^1-9]/g, '')
} else {
input.value = input.value.replace(/[^\d]/g, '')
}
trigger(input, 'input')
}
}
})
}
const trigger = (el, type) => {
const e = document.createEvent('HTMLEvents')
e.initEvent(type, true, true)
el.dispatchEvent(e)
}
οnkeyup="value=value.replace(/[^\d]/g,'')"