el-input-number添加自定义内容class-unit

在el-input,el-input-number中有需要在输入框后面添加单位的需求,这时候就需要用到class-unit

javascript 复制代码
<el-input-number size="small" class-unit="%" class="inputNumberClass"></el-input-number>

// css
.inputNumberClass[class-unit] {
    --el-input-number-unit-offset-x: 35px;
    position: relative;
}
.inputNumberClass[class-unit]::after {
    content: attr(class-unit);
    height: 100%;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    right: var(--el-input-number-unit-offset-x);
    color: #999999;
}
.inputNumberClass[class-unit] .el-input__inner {
    padding-left: 30px;
    padding-right: calc(var(--el-input-number-unit-offset-x) + 12px);
}
相关推荐
heyCHEEMS5 分钟前
切页回来组件消失了?一个浏览器渲染机制引起的容器高度坍塌 bug
前端·浏览器
iaku6 分钟前
Prompt 不是玄学:写给前端的 Prompt 工程指南
前端·人工智能
爱丶不疚6 分钟前
在 dsh 仓库里扒到的宝藏工作流:详解 .agents/notes 决策沉淀系统
前端·agent·vibecoding
喜欢睡觉11 分钟前
从"送花"讲懂 JavaScript:对象、数据类型与代理模式
前端
渣波12 分钟前
NestJS 企业级后端架构实战:从核心代码到工程化思维的深度重构
前端·typescript·nestjs
BreezeJiang13 分钟前
别再背工厂模式了:NestJS 第一行代码就是它的工业级落地
前端·javascript
光影少年13 分钟前
RN 常见性能问题:JS卡顿、UI卡顿、桥接通信耗时
前端·react native·react.js
liuxiaocheng15 分钟前
文本生成的进阶:generateText / streamText 里迟早会撞上的东西
前端·后端·ai编程
渣波22 分钟前
深度解析工厂模式:从蜜雪冰城到 NestFactory,彻底搞懂“创建与使用分离”
前端·javascript
蔓越莓22 分钟前
打包工具:编译器ESBuild
前端·面试