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);
}
相关推荐
M ? A几秒前
Vue3+TS实战避坑指南
前端·vue.js·经验分享
Mintopia6 分钟前
你以为是技术问题,其实是流程问题:工程效率的真相
前端
Mintopia12 分钟前
一套能落地的"防 Bug"习惯:不用加班也能少出错
前端
亿元程序员14 分钟前
箭头游戏那么火,搞个3D的可以吗?我:这不是3年前的游戏了吗?
前端
IT_陈寒15 分钟前
SpringBoot里的这个坑差点让我加班到天亮
前端·人工智能·后端
巫山老妖19 分钟前
大模型工程三驾马车:Prompt Engineering、Context Engineering 与 Harness Engineering 深度解析
前端
Cobyte24 分钟前
4.响应式系统基础:从发布订阅模式的角度理解 Vue3 的数据响应式原理
前端·javascript·vue.js
晓得迷路了26 分钟前
栗子前端技术周刊第 124 期 - ESLint v10.2.0、React Native 0.85、Node.js 25.9.0...
前端·javascript·eslint
半个俗人42 分钟前
fiddler的基础使用
前端·测试工具·fiddler
a1117761 小时前
变电站数字孪生大屏ThreeJS 开源项目
前端·信息可视化·开源·html