先上无加el-input
<template>
<el-input v-model="input" placeholder="Please input" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
比较多用的方法是通过输入框的onkeyup时间和onafterpaste来进行数据过滤，而实现方法如下
<template>
<el-input
v-model="input"
placeholder="Please input"
onkeyup="this.value=this.value.replace(/\D/g,'')"
onafterpaste="this.value=this.value.replace(/\D/g,'')"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
</script>
这样可以接解决数字限制问题，但是有一个非常严重的问题，如果光标在input中，此时进入中英文切换时，聚焦状态和数据双向绑定都会失效
解决方案：通过监听input标签中的@input事件进行监听并重新对绑定数值赋值，便可解决上述问题
<template>
<el-input
v-model="input"
placeholder="Please input"
@input="(val) => {
return filterNumber(val)
}"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const input = ref('')
// 过滤除数字外其他字符串
// 如果想去掉开头0，可多增加判断条件等
const filterNumber = (val: string) => {
input.value = val.replace(/\D/g, '')
}
</script>
