整数输入框 InputNumberIntZen.vue 只能输入整数 不能输入.等其他字符
创创精灵 lv.1
发布时间:2022-10-15 00:35:34 191相关标签:
这版的输入限制堪称完美 perfect!
<!--数字输入框 只能输入数字 整型 InputNumberIntZen.vue-->
<template>
<Input
ref="inputRef"
:clearable="clearable"
:maxlength="maxlength"
:placeholder="placeholder"
v-model="innerValue"
:disabled="disabled"
@on-keydown="onKeyDownHandle"
/>
</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.yourRef.validateField('yourFiledName')"
}
}
}
},
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
}
},
clearSpot (dateStr) {
return dateStr.replace(/[^0-9]/ig, '')
}
},
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
]
---------------------------------------------
生活的意义并不是与他人争高下,而在于享受努力实现目标的过程,结果是对自己行动的嘉奖。
↑面的话,越看越不痛快,应该这么说:
生活的意义就是你自己知道你要做什么,明确目标。没有目标,后面都是瞎扯!
文章来源: https://blog.51cto.com/u_15770151/5630411
特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报