关联知识:https://blog.csdn.net/zzddada/article/details/118525985 /deep/ 的用法
方法:
<template>
<Input v-model="value" placeholder="微信内部号码" type="number" number="true" class="aaaa" :maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa(event)">
<span slot="prepend">微信</span>
</Input>
</template>
<script>
export default {
data () {
return {
value: ''
}
},
methods:{
changeaa(event){
//禁止非数字字符输入
if(event.keyCode<48||event.keyCode>57)event.returnValue=false;
}
}
}
</script>
<style>
.aaaa input::-webkit-outer-spin-button,
.aaaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
.aaaa input[type="number"] {
-moz-appearance: textfield;
}
</style>
input type="number"很重要,防止中文输入法输入出现错误问题,如果右侧上下箭头没有去掉,请试着加下/deep/
/deep/.aaaa input::-webkit-outer-spin-button,
/deep/.aaaa input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
/deep/.aaaa input[type="number"] {
-moz-appearance: textfield;
}
如果获取不到event,请试下$event
<template>
<Input v-model="value" placeholder="微信内部号码" type="number" number="true" class="aaaa" :maxlength="20" clearable style="width:80%;ime-mode:Disabled" @on-keydown="changeaa($event)">
<span slot="prepend">微信</span>
</Input>
</template>
该博客介绍了如何在Vue.js组件中使用<Input>标签创建一个只允许输入数字的输入框,并通过@on-keydown事件监听器阻止非数字字符的输入。同时,通过/deep/选择器禁用了输入框的数字小按钮,并设置了 ime-mode: Disabled以防止中文输入法的干扰。此外,还提供了解决输入框样式问题的CSS代码,确保在不同浏览器中的兼容性。

632

被折叠的 条评论
为什么被折叠?



