vue3+element-plus 输入框el-input设置背景颜色和字体颜色,样式效果等同于不可编辑的效果

应用效果:

代码:

html 复制代码
<template>
......
            <el-form-item label="文件编号" label-position="right">
              <el-input v-model="qualityFileForm.fileNo" clearable :disabled="!props.isNew" />
            </el-form-item>
......
            <el-form-item label="附件" label-position="right">
              <el-input class="input-readonly" v-model="qualityFileForm.filePathname" readonly />
            </el-form-item>
......
</template>

<style scoped lang="scss">
// 设置等同于disabled的样式效果,背景色 #f5f7fa,字体颜色 #c0c4cc
// 设置类名为 input-readonly 的元素的背景颜色
.input-readonly :deep(.el-input__wrapper) {
  background-color: #f5f7fa;
}
// 设置只读的input的字体颜色,不使用类名,使用类属性选择器(.类名[属性名])
:deep(.el-input__inner[readonly]) {
  color: #c0c4cc;
}
</style>
相关推荐
一枚前端小能手10 小时前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript
小潘同学10 小时前
Vue3中响应式数据深度拷贝 Avoid app logic that relies on,,,,,,,,
前端
六六Leon10 小时前
Kuikly跨端模式接入资源管理
前端
tianchang10 小时前
深入理解 JavaScript 异步机制:从语言语义到事件循环的全景图
前端·javascript
旺仔牛仔QQ糖10 小时前
Vue3.0 Hook 使用好用多多
前端
~无忧花开~11 小时前
CSS学习笔记(五):CSS媒体查询入门指南
开发语言·前端·css·学习·媒体
程序猿小D11 小时前
【完整源码+数据集+部署教程】【零售和消费品&存货】价格标签检测系统源码&数据集全套:改进yolo11-RFAConv
前端·yolo·计算机视觉·目标跟踪·数据集·yolo11·价格标签检测系统源码
吴鹰飞侠11 小时前
AJAX的学习
前端·学习·ajax
JNU freshman11 小时前
vue 技巧与易错
前端·javascript·vue.js
北冥有鱼11 小时前
Vue3 中子组件修改父组件样式之—— global() 样式穿透使用指南
vue.js