解决element-ui数字输入框的问题

解决element-ui数字输入框的问题

在项目中我们经常会用数字输入框，但element-ui输入框type为number时会出现上下箭头，看起来并不美观

那么我们应该怎么去掉这个呢？
在style里放入以下代码就可解决
代码如下：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}

后续的几个小问题（输入框内禁止鼠标滚动、数字输入框能输入e的问题）

1. 有时候当我们把输入框设置为number时，我们会发现鼠标滚轮上下滚动，输入框的值也会随之发生变化，有时候我们为了用户体验并不想这么做，那么怎么办呢？请看下面代码

<el-input
	v-model.trim="phone"
	type="number"
	placeholder="请输入手机号码"
	@mousewheel.native.prevent
></el-input>

我们在el-input中加入@mousewheel.native.prevent就可以了

---

2. 当我们把input type值设为number值后，并不代表就只能输入数字了，还有一个特殊的的字符“e”可以输入，我们怎么样也让e不能输入呢？请看下面代码

<el-input
v-model.trim="phone"
	type="number"
	placeholder="请输入手机号码"
	@mousewheel.native.prevent
	onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
></el-input>

我们在el-input中加入οnkeyup="this.value=this.value.replace(/[^\d.]/g,’’);"就可以了

3. 限制输入框的长度，element input中maxlength=“11”属性在这里好像失效了，我们想让手机号限制在11位数 ，加入以下代码就可以了

oninput="if(value.length>11)value=value.slice(0,11)"

总结

关于element-ui数字输入框的问题就说到这了
希望对大家有所帮助
欢迎各位大佬补充