背景:
在vue做后台管理系统项目中,会有一些表单需要验证,比如只能输入数字。有一种解决方法就是使用type="number"
。由此也遇到了下面两个问题:
1. 去除上下箭头
写上type="number"
后输入框右边会有上下箭头,影响视觉体验。可以使用下面方法去除:
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"] {
-moz-appearance: textfield;
}
</style>
注意:在使用element-UI的vue项目中重写el_input样式要在全局中写,在scoped重谢这些样式不起作用!!
2. 禁止滚轮滚动改变数值
使用type="number"
后滚动鼠标的滚轮可以改变数值。要想去掉这个效果可以添加@mousewheel.native.prevent
事件,如下:
<el-input v-model.number="addManger.mobile" type="number" placeholder="请输入" @mousewheel.native.prevent />