整数输入框 InputNumberIntZen.vue 只能输入整数 不能输入.等其他字符
这版的输入限制堪称完美 perfect!
20230712 更新 加入 onBlurHandle 如果输入的02 失焦的时候 变成2
<!--数字输入框 只能输入数字 整型 InputNumberIntZen.vue-->
<template>
<Input ref="inputRef"
:clearable="clearable"
:maxlength="maxlength"
:placeholder="placeholder"
v-model="innerValue"
:disabled="disabled"
@on-keydown="onKeyDownHandle"
@on-blur="onBlurHandle" />
</template>
<script>
import { keyList1 } from './keyListByInputNumberIntZen'
export default {
name: 'InputNumberIntZen',
props: {
placeholder: {
type: String,
default: '请输入'
},
maxlength: {
type: Number,
default: 10
},
clearable: {
type: Boolean,
default: false
},
value: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
}
},
components: {},
data () {
return {
innerValue: this.value.toString(),
keyList1
}
},
watch: {
value: function (val) {
console.info('watch value', val)
this.innerValue = this.value.toString()
},
innerValue: function (val) {
console.info('watch innerValue', val)
if (this.clearSpot(val) !== val) { // 有非法字符的时候 恢复光标 主要针对中文
const diff = this.getDiff(val, this.clearSpot(val))
console.info('diff', diff)
this.$nextTick(() => {
console.info('-- this.value', this.value, '-- this.innerValue', this.innerValue)
this.innerValue = this.value
this.$nextTick(() => {
this.$refs.inputRef.$refs.input.setSelectionRange(diff, diff)
})
})
} else {
if (this.clearSpot(val) === val) {
console.info('emit val', val)
this.$emit('input', val)
this.$emit('validateField') // 这句很重要
// 外层需要 每次 验证一下
// @validateField="$refs.internalTransferRef.validateField('undertakeNumber')"
}
}
}
},
computed: {},
methods: {
getDiff (str1, str2) {
let ret = 0
for (let i = 0; i < str1.length; i++) {
if (str1.substr(i, 1) === str2.substr(i, 1)) {
// next
} else {
ret = i
break
}
}
return ret
},
onKeyDownHandle (e) {
let across = this.keyList1.includes(e.keyCode)
// 这里只能拦截非中文 中文字符 watch拦截
if (!across) { // 只能输入整数
e.preventDefault()
return false
}
},
clearSpot (dateStr) {
return dateStr.replace(/[^0-9]/ig, '')
},
onBlurHandle () {
if (this.innerValue === '') {
return false
}
const n = Number(this.innerValue)
if (String(n) !== this.value) {
console.info('n', n)
this.$emit('input', String(n))
}
},
},
created () { },
activated () { },
mounted () { },
beforeDestroy () { }
}
</script>
<style>
</style>
// keyListByInputNumberIntZen.js
export const keyList1 = [
8, // 退格键
9, // tab
96, // 0
97, // 1
98, // 2
99, // 3
100, // 4
101, // 5
102, // 6
103, // 7
104, // 8
105, // 9
// 110, // . 数字类型带点,这里是整型的 所以把点就注释掉了
// 190, // .
46, // del
48, // 0
49, // 1
50, // 2
51, // 3
52, // 4
53, // 5
54, // 6
55, // 7
56, // 8
57, // 9
37, // left
39 // right
]
<InputNumberIntZen v-model.trim="modalData.myInt"
style="width: 100px;"
:maxlength="2"
placeholder="请输入0-99 整数" />
---------------------------------------------
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
https://pengchenggang.gitee.io/navigator/
SMART原则:
目标必须是具体的(Specific)
目标必须是可以衡量的(Measurable)
目标必须是可以达到的(Attainable)
目标必须和其他目标具有相关性(Relevant)
目标必须具有明确的截止期限(Time-based)