一、InputNumber簡介

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、實現效果