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);
}
相关推荐
北辰alk13 小时前
Vue 动态路由完全指南:定义与参数获取详解
vue.js
北辰alk13 小时前
Vue Router 完全指南:作用与组件详解
vue.js
北辰alk13 小时前
Vue 中使用 this 的完整指南与注意事项
vue.js
xkxnq13 小时前
第二阶段:Vue 组件化开发(第 16天)
前端·javascript·vue.js
北辰alk13 小时前
Vue 插槽(Slot)完全指南:组件内容分发的艺术
vue.js
烛阴14 小时前
拒绝配置地狱!5 分钟搭建 Three.js + Parcel 完美开发环境
前端·webgl·three.js
北辰alk14 小时前
Vue 组件中访问根实例的完整指南
vue.js
北辰alk14 小时前
Vue Router 中获取路由参数的全面指南
vue.js
北辰alk14 小时前
Vue 的 v-cloak 和 v-pre 指令详解
vue.js
期待のcode14 小时前
前后端分离项目 Springboot+vue 在云服务器上的部署
服务器·vue.js·spring boot