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>
相关推荐
卓码软件测评5 分钟前
K6的CI/CD集成在云原生应用的性能测试应用
前端·功能测试·测试工具·ci/cd·云原生
JordanHaidee26 分钟前
【Rust GUI开发入门】编写一个本地音乐播放器(11. 支持动态明暗主题切换)
前端·ui kit
爱泡脚的鸡腿27 分钟前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
拜晨43 分钟前
用 MCP 把自己的接口接入 AI
前端·node.js
小狮子安度因1 小时前
FFmpeg-vflip滤镜使用
vue.js·ffmpeg·myeclipse
古夕1 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js
拾缘1 小时前
esm和cmj混用报错分析
前端·javascript
古夕1 小时前
技术复盘文档:`resourceLogoUrl` 数据丢失问题分析与最终解决方案
前端·javascript·vue.js
streaker3031 小时前
前端开发者的 AI 学习笔记 🚀
前端·openai
高热度网1 小时前
从 Vercel 构建失败谈 Git 大小写敏感性问题:一个容易被忽视的跨平台陷阱
前端·javascript