Encontré una solución creando un componente en vue donde uso un input de tipo number y le agrego un método capturando el keyDown y haciendo preventDefault() de los codigos de los caracteres que no quiero que se muestren en el input
<template>
<input type="number"
@keydown="validateEnter"
v-model="localValue"
:min="min"
:max="max"/>
</template>
<script>
export default {
props: {
value: [Number, String],
min: {
type: [Number, String],
default: 1,
},
max: {
type: [Number, String],
default: 99999999999999999,
}
},
data() {
return {
localValue: this.value,
localMax: this.max,
localMin: this.min,
};
},
methods: {
validateEnter(event) {
// 107 => (Num Pad +) , 109 => (Num Pad -) , 190 => (.) , 69 => (e), 110 => (Num Pad .)
var invalidEnter = [107, 109, 69, 190, 110].includes(event.keyCode);
if (invalidEnter) {
event.preventDefault();
}
}
},
watch: {
localValue(newValue) {
this.$emit('input', newValue);
}
},
};
Con el método validateEnter
decido que key dejo teclear o no.
Y aquí un ejemplo de como usar el componente.
<number-up-down data-vv-as="Book Number"
v-validate="'required|numeric|min_value:1|max_value:99999999999'"
class="form-control"
name="book_number"
id="book_number"
v-model="localManual.book_number">
</number-up-down>