Element_InputNumber组件

一、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;
      }
    }
    
  }

View Code

2、实现效果

1、仅允许输入标准的数字值，可定义范围

二、InputNumber使用

<el-input-number :controls="true" type="number" v-model="inputNumber" :min="1" :max="10" controls-position="right" class="inputNumberContent"></el-input-number>

三、更改样式

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;
      }
    }
    
  }

View Code

2、实现效果

来源：https://www.cnblogs.com/caoxueying2018/p/11966600.html

标签

input

line-height

background