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);
}
相关推荐
shoubepatien21 分钟前
JavaWeb_Web基础
java·开发语言·前端·数据库·intellij-idea
WordPress学习笔记28 分钟前
wordpress外贸主题Google地图添加(替换)方案
前端·wordpress·wordpress地图
计算机毕设VX:Fegn089534 分钟前
计算机毕业设计|基于springboot + vue旅游信息推荐系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·课程设计·旅游
古月฿1 小时前
大学生素质测评系统设计与实现
java·vue.js·redis·mysql·spring·毕业设计
码农秋1 小时前
Element Plus DatePicker 日期少一天问题:时区解析陷阱与解决方案
前端·vue.js·elementui·dayjs
未来之窗软件服务1 小时前
未来之窗昭和仙君(五十六)页面_预览模式——东方仙盟筑基期
前端·仙盟创梦ide·东方仙盟·昭和仙君·东方仙盟架构
top_designer1 小时前
Illustrato:钢笔工具“退休”了?Text to Vector 零基础矢量生成流
前端·ui·aigc·交互·ux·设计师·平面设计
源码获取_wx:Fegn08951 小时前
基于springboot + vue物业管理系统
java·开发语言·vue.js·spring boot·后端·spring·课程设计
星哥说事1 小时前
星哥带你玩飞牛NAS-13:自动追番、订阅下载 + 刮削,动漫党彻底解放双手!
前端
donecoding1 小时前
前端AI开发:为什么选择SSE,它与分块传输编码有何不同?axios能处理SSE吗?
前端·人工智能