el-input-number 如何添加单位

ElementUI

发布日期: 2023-06-13

更新日期: 2024-07-17

文章字数: 567

阅读时长: 2 分

阅读次数:

需求原型图上，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。