1、仅允许输入标准的数字值，可定义范围
二、InputNumber使用
<el-input-number :controls="true" type="number" v-model="inputNumber" :min="1" :max="10" controls-position="right" class="inputNumberContent"></el-input-number>
三、更改样式
提示：可在组件中，用css更改其默认样式。（注意：1、inputNumber要设置其class，避免影响到其他组件中的inputNumber；2、不要设置scoped,因为设置了scoped则样式仅仅应用到 style 元素的父元素及其子元素,导致该样式优先级低于组件的默认样式优先级，使设置样式失效）
1、实现代码
#app {
background: #002140;
width:100%;
height: 1000px;
padding: 300px;
.inputNumberContent {
width: 168px;
line-height: 28px;
.el-input-number__decrease, .el-input-number__increase {
height: 14px !important;
line-height: 14px !important;
width: 19px;
background: rgba(60, 97, 133, 0.2);
border: 1px solid #5082b2 !important;
border-radius: 0;
}
.el-input-number__decrease {
border-top: none !important;
}
.inputNumberContent .el-icon-arrow-down {
color: #fff;
line-height: 1.3;
}
.inputNumberContent .el-input__inner {
height: 28px;
line-height: 28px;
padding-left: 10px;
padding-right: 10px;
background: rgba(60, 97, 133, 0.2);
border: 1px solid #5082b2;
font-size: 12px;
color: #cde6ff;
border-radius: 2px;
padding: 0 10px;
text-align: left;
}
}
}
2、实现效果
