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);
}
相关推荐
冷琴1996几秒前
基于Python+Vue开发的电影订票管理系统源码+运行步骤
开发语言·vue.js·python
用户8453710783114 分钟前
低代码双雄对决:Joker 的「开发者革命」与美乐的「企业护城河」(2025 实战版)
前端
计算机-秋大田15 分钟前
基于SpringBoot的餐厅点餐管理系统设计与实现(源码+SQL脚本+LW+部署讲解等)
java·vue.js·spring boot·后端·课程设计
崔璨23 分钟前
实现一个精简React -- 利用update函数,实现useState(9)
前端·react.js
鱼樱前端29 分钟前
Vue3+TS+Vant 上拉加载下拉刷新框架
前端·vue.js·ecmascript 6
宇寒风暖32 分钟前
HTML 表单详解
前端·笔记·学习·html
蒜香拿铁34 分钟前
【typescript基础篇】(第三章) 函数
前端·typescript
蒜香拿铁34 分钟前
【typescript基础篇】(第三章) 接口
前端·typescript
cheeseagent34 分钟前
Angular组件库按需引入实战指南:从踩坑到起飞
前端·npm