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);
}
相关推荐
卷帘依旧1 分钟前
Hooks在Fiber上的存储原理
前端
you45804 分钟前
学成在线--day02 CMS前端开发(含Vue基础知识得回顾)
前端·javascript·vue.js
xiaofeichaichai11 分钟前
虚拟 DOM
前端·javascript·vue.js
2401_8784545315 分钟前
前端高频得手写题
前端
初一初十39 分钟前
vue3实现的纯前端护肤品商城网站
前端·javascript·vue.js·前端框架
卷帘依旧41 分钟前
React状态管理方案怎么选
前端
zeqinjie1 小时前
Flutter 折叠屏 iPad / 宽屏适配实践
android·前端·flutter
小村儿1 小时前
连载13- 内部Tools,Claude Code 怎么真正"动"你的代码
前端·后端·ai编程
IT_陈寒1 小时前
Python的线程池把我坑惨了,原来异步不是万能的
前端·人工智能·后端
初一初十2 小时前
vue3茶叶商城网站vue网页vuejs前端
前端·javascript·vue.js·vscode·前端框架