el-input-number 如何添加单位

需求原型图上，el-input-number的文本框里要加上单位：

查看element-ui的文档，好像没有提供类似的配置。于是自己利用css的伪类选择器::after实现了：

<el-input-number size="small" class="my-el-input-number"></el-input-number> 

<el-input-number size="small" class="my-el-input-number"></el-input-number>

css：

.my-el-input-number {
    position: relative;
}
.my-el-input-number::after {
    content: '%';
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
}
.my-el-input-number .el-input__inner{ // 不加这行的话，当文本框里数值很大时，会和单位重叠
    padding-left: 30px;
    padding-right: 48px;
}

源代码： 

.my-el-input-number {
    position: relative;
}
.my-el-input-number::after {
    content: '%';
    display: inline-block;
    height: 20px;
    line-height: 20px;
    width: 20px;
    text-align: center;
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
}
.my-el-input-number .el-input__inner{ // 不加这行的话，当文本框里数值很大时，会和单位重叠
    padding-left: 30px;
    padding-right: 48px;
}

效果图如下：

后来，又发现另外一个地方也需要用到，可是单位不一样，重复写样式太麻烦，于是优化了一版，将单位当作变量传递进css中，可以做到一段css满足多个不同单位的需求。

<el-input-number size="small" data-unit="%" class="my-el-input-number" />

HTML源代码： 

<el-input-number size="small" data-unit="%" class="my-el-input-number" />

.my-el-input-number[data-unit] {
    --el-input-number-unit-offset-x: 35px;
    position: relative;
}
.my-el-input-number[data-unit]::after {
    content: attr(data-unit);
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: var(--el-input-number-unit-offset-x);
    color: #999999;
}
.my-el-input-number[data-unit] .el-input__inner {
    padding-left: 30px;
    padding-right: calc(var(--el-input-number-unit-offset-x) + 12px);
}

css源代码： 

.my-el-input-number[data-unit] {
    --el-input-number-unit-offset-x: 35px;
    position: relative;
}
.my-el-input-number[data-unit]::after {
    content: attr(data-unit);
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: var(--el-input-number-unit-offset-x);
    color: #999999;
}
.my-el-input-number[data-unit] .el-input__inner {
    padding-left: 30px;
    padding-right: calc(var(--el-input-number-unit-offset-x) + 12px);
}

 data-unit传%就显示%，传G就显示G。

 如果帮助到你了，希望留下一个赞👍吧，那是我继续前进的动力