el-input-number输入框超过限制后自动变为最大值

input输入框使用了el-input-number

需求：目标室温输入框数据库设置最大是4位整数，限制一位小数，且后面要加单位，当输入数字超过限制，默认显示限制的最大值 ，所以就有了输入完图一自动变为图二的数字。

el-input-number方法不支持插槽，只有el-input支持下面的插槽append写单位，但是el-input输入的数字超过限制后不会自动变成最大值，所以这里使用的是el-input-number，单位使用div，重写了样式，注意要给div设置高度。

append

输入框后置内容，只对非 type="textarea" 有效

:controls="false",去掉默认显示的控制器

<el-form ref="ruleFormRef" :model="ruleForm" label-position="left" :rules="rules" label-width="120px">
        <el-form-item label="目标室温" prop="temp">
          <div class="input-number-com">
            <el-input-number class="appendClass" style="width: 107px;" :controls="false" v-model="ruleForm.temp" :min="0"
              :max="9999" :precision="1">
            </el-input-number>
            <div class="append">℃</div>
          </div>
        </el-form-item>
</el-form>


// 样式
 .input-number-com {
    display: flex;
    align-items: center;
    height: 32px; // 注意：这里要设置高度，否则会出现输入框和单位的border对不齐的问题

    .append {
      white-space: nowrap;
      height: 32px;
      line-height: 32px;
      font-family: MicrosoftYaHei;
      padding: 0 4px;
      box-sizing: border-box;
      border: 1px solid var(--el-input-border-color, var(--el-border-color));
      width: 38px;
      font-size: 12px;
      text-align: center;
      border-left-width: 0px;
    }

    .append {
      border-radius: 0px 4px 4px 0px;
      border-left: 0;
    }

    :deep(.el-input__inner) {
      border-radius: 4px;
      text-align: left;
    }

    .appendClass {
      :deep(.el-input__wrapper) {
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        text-align: left;
      }
    }
  }