vue3+ts+element-plus 输入框el-input设置背景颜色

普通情况:

组件内容:

<el-input v-model="applyBasicInfo.outerApplyId"/>

样式设置:

::v-deep .el-input__wrapper {background-color: pink;
}// 也可以这样设置
::v-deep(.el-input__wrapper) {background-color: pink;
}// 也可以这样设置
:deep(.el-input__wrapper) {background-color: pink;
}// 也可以这样设置
:deep .el-input__wrapper {background-color: pink;
}

效果:


特殊情况:输入框设置禁用状态

组件内容:

<el-input v-model="applyBasicInfo.outerApplyId" disabled/>

 样式设置:

::v-deep .el-input__wrapper {background-color: pink;
}

效果:输入框前后部分均没有背景颜色 

解决方法:

组件内容:增加类名设置 class="disabled-input"

<el-input v-model="applyBasicInfo.outerApplyId" disabled class="disabled-input"/>

样式设置:增加类名 .disabled-input

::v-deep .disabled-input .el-input__wrapper {background-color: pink;
}

效果:

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/67873.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VUE3 常用的组件介绍

Vue 组件简介 Vue 组件是构建 Vue 应用程序的核心部分&#xff0c;组件帮助我们将 UI 分解为独立的、可复用的块&#xff0c;每个组件都有自己的状态和行为。Vue 组件通常由模板、脚本和样式组成。组件的脚本部分包含了各种配置选项&#xff0c;用于定义组件的逻辑和功能。 组…

linux删除用户

1、查看账号 cat /etc/passwd 查看所有用户账号信息&#xff1a;该文件记录了系统中的所有用户账号信息&#xff0c;包括用户名、用户ID、用户所属组等。 2、删除账号 基本删除&#xff1a;使用userdel命令删除用户账号&#xff0c;格式为userdel [选项] 用户名。如果不加任…

直线模组中导轨和滑块松动如何处理?

直线模组抖动是直线模组在日常运用中比较常见的一种异常行为&#xff0c;直线模组的抖动对精度和寿命都会产生严重影响。直线模组出现抖动通常是由于导轨和滑块之间的摩擦、松动或不平衡所引起的。那么&#xff0c;针对直线模组中导轨和滑块存在的松动问题&#xff0c;可以采取…

Python 写的 智慧记 进销存 辅助 程序 导入导出 excel 可打印 Pyside6版

图 这图是第2版, 现在发布原型版 代码: order_system_pyside6.py from PySide6.QtWidgets import (QApplication, QMainWindow, QWidget, QVBoxLayout,QHBoxLayout, QLabel, QLineEdit, QPushButton, QMessageBox,QTableWidget, QTableWidgetItem, QComboBox, QFrame,QH…

2025年第三届“华数杯”国际赛A题解题思路与代码(Matlab版)

游泳竞技策略优化模型代码详解&#xff08;MATLAB版&#xff09; 第一题&#xff1a;速度优化模型 本部分使用MATLAB实现游泳运动员在不同距离比赛中的速度分配策略优化。 1. 模型概述 模型包含三个主要文件&#xff1a; speed_optimization.m: 核心优化类plot_speeds.m: …

element upload上传图片,上传完成隐藏组件或者禁用上传

背景&#xff1a; 在项目开发&#xff0c;需要上传图片&#xff0c;一张或者多张。当上传1张图片时&#xff0c;upload组件有一张图片时&#xff0c;组件自带的disabletrue设置为true禁用上传&#xff0c;就不会触发上传接口了&#xff0c;但是还是可以点开图片进行选择&#x…

【2024年华为OD机试】 (A卷,100分)- 二元组个数(Java JS PythonC/C++)

一、问题描述 以下是题目描述的 Markdown 格式&#xff1a; 题目描述 给定两个数组 a 和 b&#xff0c;若 a[i] b[j]&#xff0c;则称 [i, j] 为一个二元组。求在给定的两个数组中&#xff0c;二元组的个数。 输入描述 第一行输入 m&#xff0c;表示第一个数组的长度。第二…

Homebrew 【MAC安装软件利器】

1、brew介绍 Homebrew游来: Homebrew 的诞生源于一个年轻程序员的不满和创新。2009 年&#xff0c;Max Howell 当时是一名在苹果公司工作的程序员。他觉得在 Mac 上安装和管理开源软件特别麻烦&#xff0c;常常需要手动下载源代码、解决依赖关系、编译安装&#xff0c;过程繁琐…

AOP实现操作日志记录

文章目录 1.common-log4j2-starter1.目录2.pom.xml 引入依赖3.LogAspect.java4.Log4j2AutoConfiguration.java Log4j2自动配置类条件注入切面类 2.common-log4j2-starter-demo 测试1.目录2.application.yml 启用日志切面3.TraceController.java4.结果 1.common-log4j2-starter …

JavaEE之线程池

前面我们了解了多个任务可以通过创建多个线程去处理&#xff0c;达到节约时间的效果&#xff0c;但是每一次的线程创建和销毁也是会消耗计算机资源的&#xff0c;那么我们是否可以将线程进阶一下&#xff0c;让消耗计算机的资源尽可能缩小呢&#xff1f;线程池可以达到此效果&a…

YOLOv11改进,YOLOv11添加HAttention注意机制用于图像修复的混合注意力转换器,CVPR2023,超分辨率重建

摘要 基于Transformer的方法在低层视觉任务中表现出色,例如图像超分辨率。然而,作者通过归因分析发现,这些网络只能利用有限的空间范围的输入信息。这意味着现有网络尚未充分发挥Transformer的潜力。为了激活更多的输入像素以获得更好的重建效果,作者提出了一种新型的混合…

Shader -> SweepGradient扫描渐变着色器详解

XML文件 <com.example.myapplication.MyViewxmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_gravity"center"android:layout_height"400dp"/>自定义View代码 c…

LabVIEW调用不定长数组 DLL数组

在使用 LabVIEW 调用 DLL 库函数时&#xff0c;如果函数中的结构体包含不定长数组&#xff0c;直接通过 调用库函数节点&#xff08;Call Library Function Node&#xff09; 调用通常会遇到问题。这是因为 LabVIEW 需要与 DLL 中的数据结构完全匹配&#xff0c;而包含不定长数…

IOS开发如何从入门进阶到高级

针对iOS开发的学习&#xff0c;不同阶段应采取不同的学习方式&#xff0c;以实现高效提升.本文将iOS开发的学习分为入门、实战、进阶三个阶段&#xff0c;下面分别详细介绍. 一、学习社区 iOS开源中国社区 这个社区专注于iOS开发的开源项目分享与协作&#xff0c;汇集了大量开…

Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式

业务场景 在目前常见的中后台管理系统中&#xff0c;比较常见的是固定的布局方式包裹页面&#xff0c;但一些特殊页面&#xff0c;比如&#xff1a;登录页面、注册页面、忘记密码页面这些页面是不需要布局包裹的。 但在 Next.js AppRouter 中&#xff0c;必须包含一个根布局文…

基于 Python 和 OpenCV 的人脸识别上课考勤管理系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…

PHP语言的函数实现

PHP语言的函数实现 在现代Web开发中&#xff0c;PHP是一种流行的后端脚本语言。它以简单易学和强大的功能著称&#xff0c;广泛应用于构建动态网站和Web应用程序。在PHP中&#xff0c;函数是组织代码、提高代码重用性和可读性的关键元素。本文将深入探讨PHP的函数实现&#xf…

人工智能与物联网:智慧城市的未来

引言 清晨6点&#xff0c;智能闹钟根据你的睡眠状态和天气情况&#xff0c;自动调整叫醒时间&#xff1b;窗帘缓缓打开&#xff0c;阳光洒满房间&#xff1b;厨房里的咖啡机已经为你准备好热饮&#xff0c;而无人驾驶公交车正按时抵达楼下站点。这不是科幻电影的场景&#xff…

小R的蛋糕分享

小R的蛋糕分享 问题描述 小R手里有一个大小为 n 行 m 列的矩形蛋糕&#xff0c;每个小正方形区域都有一个代表美味度的整数。小R打算切割出一个正方形的小蛋糕给自己&#xff0c;而剩下的部分将给小S。她希望两人吃的部分的美味度之和尽量接近。 我们定义小R吃到的部分的美味度…

使用postMessage解决iframe与父页面传参

接收传递的消息时&#xff0c;可以将 window.addEventListener(message, function(e) { console.log(e.data) }) 写法&#xff0c;更换为 window.onmessage async function(e) {} 可以避免消息发送后&#xff0c;多次接收该参数 父页面js IframeEvent(){const send …