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);
}
相关推荐
落霞的思绪15 分钟前
配置React和React-dom为CDN引入
前端·react.js·前端框架
Hacker_Z&Q17 分钟前
CSS 笔记2 (属性)
前端·css·笔记
Anastasiozzzz24 分钟前
LeetCode Hot100 295. 数据流的中位数 MedianFinder
java·服务器·前端
Exquisite.1 小时前
Nginx
服务器·前端·nginx
打小就很皮...1 小时前
dnd-kit 实现表格拖拽排序
前端·react.js·表格拖拽·dnd-kit
Ulyanov1 小时前
从静态到沉浸:打造惊艳的Web技术发展历程3D时间轴
前端·javascript·html5·gui开发
打小就很皮...1 小时前
React 19 + Vite 6 + SWC 构建优化实践
前端·react.js·vite·swc
Highcharts.js2 小时前
使用Highcharts与React集成 官网文档使用说明
前端·react.js·前端框架·react·highcharts·官方文档
这是个栗子2 小时前
AI辅助编程(二) - 通译千问
前端·ai·通译千问
VT.馒头2 小时前
【力扣】2625. 扁平化嵌套数组
前端·javascript·算法·leetcode·职场和发展·typescript